Displaying the clicked value (link) on a page in a modal window together with the index value

I have a page with some values in a table which are read from a .csv file and displayed. The values changes with time (dynamic), So I am using for loop in PHP with the size of the file as limit of loop and displaying the values and each values are links that displays a modal window when clicked.

This is my code:

<?php


if (($csv = fopen("csv.csv", "r")) !== FALSE) 
{
        while (($data = fgetcsv($csv, 1000, ",")) !== FALSE) 
        {
            
            $f = $data; 

        }
        fclose($csv);
}


$array=array();
for($i=0;$i<sizeof($f);$i++)
{
    $array[$i]=$f[$i];


    echo '<table ><tr><td style="  height:25px; vertical-align: middle;"><a href="#" onclick="overlay()"><input type="button" value="'.$array[$i].'"></a></td></tr></table>

<div id="overlay">
    <div>
        
     <table style="height: 37px; ">
          <tbody>
            <tr>
              <td style="text-align: left;">color:</td>
              <td  align="left"><input name="color" value="'.$array[$i].'"></td>
            </tr>
              

             <tr>
              <td style=" text-align: left;">index:</td>
              <td  align="left"><input name="index" value="'.$i.'"></td>
            </tr>       

             <tr>
              <td style=" text-align: left;">brightness:</td>
              <td  align="left"><input name="brightness"></td>
            </tr>
          </tbody>
        </table>
       
  
<br><input value="Submit" type="submit"><a href="#" onclick="overlay()"><button >X</button></a>
</div>
    </div>';}?>

The modal window should contain the respective color clicked, the index and a field for brightness.

And I have a css for overlay where the field is hidden initially,

My csv file is:

green, red, white, blue, yellow

When the button (link) with these values are clicked, it will show a modal window, but it is always showing the first value for all buttons (green always) with index value as 0. Am I doing wrong somewhere? Should I use some JavaScript for obtaining this functionality?

(I am not supposed to use jQuery anywhere)

Answer

you can use only one ID on your page, as i see you have lots of id=”overlay”, that’s why it opens the first one

make your id like overlay + Index, and path this name as a parameter to your onclick=”overlay(overlay + Index)