JSFiddle - React, Tailwind, and code Playground

HTML

<title>Untitled Document</title>


<body>
<table width="300" border="1">
  <tbody>
    <tr>
      <td onclick="toggleTable()" id="cell1">&nbsp;On-Menu</td>
      <td onclick="toggleTable()" id="cell2">&nbsp;On-Menu</td>
      <td onclick="toggleTable()" id="cell3">&nbsp;On-Menu</td>
      <td onclick="toggleTable()" id="cell4">&nbsp;On-Menu</td>
    </tr>
    <tr>
      <td onclick="toggleTable()" id="cell5">&nbsp;On-Menu</td>
      <td onclick="toggleTable()" id="cell6">&nbsp;On-Menu</td>
      <td onclick="toggleTable()" id="cell7">&nbsp;On-Menu</td>
      <td onclick="toggleTable()" id="cell8">&nbsp;On-Menu</td>
    </tr>
    <tr>
      <td onclick="toggleTable()" id="cell9">&nbsp;On-Menu</td>
      <td onclick="toggleTable()" id="cell10">&nbsp;On-Menu</td>
      <td onclick="toggleTable()" id="cell11">&nbsp;On-Menu</td>
      <td onclick="toggleTable()" id="cell12">&nbsp;On-Menu</td>
    </tr>
  </tbody>
</table>
<table width="300" border="1" id="menulist">
  <tbody>
    <tr>
      <td id="cellorange">&nbsp;Orange</td>
    </tr>
    <tr>
      <td id="cellapple">&nbsp;Apple</td>
    </tr>
    <tr>
      <td id="cellbanana">&nbsp;Banana</td>
    </tr>
  </tbody>
</table>
</body>

JavaScript

function toggleTable() {
    var lTable = document.getElementById("menulist");
    lTable.style.display = (lTable.style.display == "table") ? "none" : "table";
}