JSFiddle - React, Tailwind, and code Playground

HTML

<title>Untitled Document</title>
<body>
<table width="300" border="1" id="table1">
  <tbody>
    <tr>
      <td id="cell1"> On-Menu</td>
      <td id="cell2"> On-Menu</td>
      <td id="cell3"> On-Menu</td>
      <td id="cell4"> On-Menu</td>
    </tr>
    <tr>
      <td id="cell5"> On-Menu</td>
      <td id="cell6"> On-Menu</td>
      <td id="cell7"> On-Menu</td>
      <td id="cell8"> On-Menu</td>
    </tr>
    <tr>
      <td id="cell9"> On-Menu</td>
      <td id="cell10"> On-Menu</td>
      <td id="cell11"> On-Menu</td>
      <td id="cell12"> On-Menu</td>
    </tr>
  </tbody>
</table>
<table width="300" border="1" id="menulist">
  <tbody>
    <tr>
      <td id="cellorange"> Orange</td>
    </tr>
    <tr>
      <td id="cellapple"> Apple</td>
    </tr>
    <tr>
      <td id="cellbanana"> Banana</td>
    </tr>
  </tbody>
</table>
</body>

CSS

#menulist {display:none;}

JavaScript

var firstTable = document.getElementById("table1")
    var firstTableCells = firstTable.getElementsByTagName("td");
    var lTable = document.getElementById("menulist");
    var lTableCells = null;
    var actionCell = null;
		for(var i = 0; i < firstTableCells.length; ++i){
    	firstTableCells[i].addEventListener("click", function(evt){
        actionCell = evt.srcElement;
      	lTable.style.display = (lTable.style.display === "table") ? "none" : "table";
				if(lTable.style.display === "table"){
        	lTableCells = lTable.getElementsByTagName("td");
          for(var x = 0; x < lTableCells.length; ++x){
          	lTableCells[x].addEventListener("click", function(){
            	actionCell.innerHTML = this.innerHTML;
            })
          }
        }
      });
    }