Create periodic table with PHP ,CSS

I create a periodic table of elements to get information about a specific element from database.i have a problem to get the row and column number in the PHP code ,look at the image,the first element is group 1 period 1 and so on
enter image description here

my code

echo'<div class="element period-1 group-1  " style="background-color:'.$color.'" >
      <span class="number">'.$id.'</span>
      <span class="symbol">'.mb_substr($name,0,2).'</span>
      <span class="name">'.$name.'</span>
      <span class="atomic">'.$pro_number.'</span>
      </div>';

how can i change the element period-1 group-1 “numbers” with code
i use for loop and while loop but not working well
i need help please
Thank you

to solve my problem and give me the right code