Having trouble making a CSS grid layout interactive with jQuery

https://teamtreehouse.com/workspaces/40593217#

I am making a matching game in which you have a 3x3 grid of divs which flash randomly and you have to match them. I re-wrote my html and css using css grid to make the game grid responsive. However, now when I try to start the game, only the first div in the upper left corner will actually flash, and if I go into the html and attempt to add style="display: block" to the element, still only the first div will actually light up. Here is the html for my grid:

<div id="game-grid" class="grid"> <div id="one"></div> <div id="two"></div> <div id="three"></div> <div id="four"></div> <div id="five"></div> <div id="six"></div> <div id="seven"></div> <div id="eight"></div> <div id="nine"></div> </div>

If I apply style="display: block" to say the div with the id of "three" then still only the div with the id of "one" will actually light up. This has me extremely confused. When I had my game set up without css grid layout, it worked fine. The jQuery in my program was able to make different, random divs flash. I have included a link to a workspace with all my files in it so you can see it for yourself. Click on the preview and go to the index file and you will see how only one div flashes. If you open the chrome developer tools and look at the html while the game is running, you can even see the inline style being added and changed in all the divs, yet it only applying visually to the first div.

Any help is greatly appreciated!