clickable table cells - different dropdown lists based on cell content
<p>Each of the cells in the table below, generated by php/mysql (cells generated by a <code>loop</code> through dates <code>foreach</code> employee. Each cell is clickable other than the headings.</p>

<p>When the user clicks on a cell I want a dropdown box to appear with a number of options which depending on whether the cell has a shift in it or not.</p>

<p>At the moment if I click an empty cell on <strong>any</strong> employees row it will open the dropdown in the <strong>first</strong> employee's <strong>first</strong> empty cell.</p>

<p><strong>How can I name or identify these drop down lists in a dynamic way so that the javascript function will open the correct dropdown for the correct cell?</strong></p>

<p>I know that use of an array/list would be most appropriate, but can't figure out how get js to identify it.</p>

<p>The complete code for the timetable at the bottom will put:</p>

<pre><code>echo "&lt;td onclick='myFunction()' class='dropbtn'&gt;";
echo "&lt;div class='dropdown'&gt;";
echo "&lt;div id='dropdown' class='dropdown-content'&gt;";
echo "&lt;a href='#'&gt;Link 1&lt;/a&gt;";
echo "&lt;a href='#'&gt;Link 2&lt;/a&gt;";
echo "&lt;a href='#'&gt;Link 3&lt;/a&gt;";
echo "&lt;/div&gt;";
echo "&lt;/div&gt;";
echo "&lt;/td&gt;;
</code></pre>

<p>As each empty cell on an employee's row (not the unassigned ones).</p>

<p>Javascript:</p>

<pre><code>function myFunction() {
    document.getElementById("dropdown").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i &lt; dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</code></pre>

<p><a href="https://i.stack.imgur.com/wpj1j.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wpj1j.jpg" alt="Timetable"></a></p>

<p>PHP to generate timetable</p>

<pre><code>$week = $_POST['week'];
$year = $_POST['y'];

for($i=0;$i&lt;7;$i++){  
$gendates = new DateTime();
$gendates-&gt;setISODate($year,$week,1 + $i); 
$datesarray[$i] = $gendates-&gt;format('Y-m-d'); 
}

echo "&lt;table class='editweektable'&gt;&lt;tr&gt;";
    echo "&lt;th&gt;Employee&lt;/th&gt;";
        foreach($datesarray as $key =&gt; $date){
            echo "&lt;th&gt;".date("D", strtotime($date))."&lt;br&gt;".date("d-m", strtotime($date))."&lt;/th&gt;";
        }
    echo "&lt;/tr&gt;";

    $getunassigned-&gt;execute();
    while($row = $getunassigned-&gt;fetch(PDO::FETCH_ASSOC)){

        echo "&lt;tr&gt;&lt;td&gt;Unassigned&lt;/td&gt;";
            foreach($datesarray as $key =&gt; $date){
                echo "&lt;td&gt;";
                if($row['date'] == $date){
                    echo date("H:i", strtotime($row['starttime']))." - ".date("H:i", strtotime($row['finishtime']));
                } else { 
                    //empty cell 
                }
                echo "&lt;/td&gt;";
            }
        echo "&lt;/tr&gt;";
    }

    $getemployees-&gt;execute();

    while($row1 = $getemployees-&gt;fetch(PDO::FETCH_ASSOC)){

        echo "&lt;tr&gt;&lt;td&gt;".$row1['fname']." ".$row1['lname']."&lt;/td&gt;";
            foreach($datesarray as $key =&gt; $date){
            echo "&lt;td  onclick='myFunction()' class='dropbtn'&gt;";
            $eid = $row1['eid'];
            $getemployeeshifts-&gt;execute();
            $row2 = $getemployeeshifts-&gt;fetch(PDO::FETCH_ASSOC);
            $count = $getemployeeshifts-&gt;rowCount();
            if($count == 0){
                echo "&lt;div class='dropdown'&gt;";
                echo "&lt;div id='myDropdown' class='dropdown-content'&gt;";
                echo "&lt;a href='#'&gt;Link 1&lt;/a&gt;";
                echo "&lt;a href='#'&gt;Link 2&lt;/a&gt;";
                echo "&lt;a href='#'&gt;Link 3&lt;/a&gt;";
                echo "&lt;/div&gt;";
                echo "&lt;/div&gt;";

            } else {
                echo date("H:i", strtotime($row2['starttime']))." - ".date("H:i", strtotime($row2['finishtime']));
            }


            echo "&lt;/td&gt;";
            }
        echo "&lt;/tr&gt;";    
    }
    echo "&lt;/table&gt;";
</code></pre>