Divs are being weird when I try to put them outside a certain div

Hello! I’m creating a mancala game. For that I designed a board, where the seeds are randomly placed and colored in each pit. For some reason the code I wrote to do so only works for the pits but not for the stores - if you’ll click the link below, you’ll see that while the pits have seeds in them, in the stores there are only green transparent circles on the labels.
It works like this: Each pit and store has an id. The first pit on the first row id is 0, the second pit on the first row id is 1. If the players choose that there are 6 pits in each row, the store in the right id is 6, and the store in the left id is 7. The first pit on the second row id is 8.
Each seed has an id too, and this is how they are placed.
I’m not sure what the problem is. When I tried to debug it, it showed me that when it reaches the store it moves the last seed created in the pit before the store even though the id changed.
After that I tried to change where the stores are placed in the html creating loop (BuildBoard()) and when instead of putting them in “specialtext” but in “text” the seeds were in the stores, but it ruined the board.

My game