JSFiddle - React, Tailwind, and code Playground

by vasi_32

HTML

<table width="300" border="1" id="menuitems">
  <tbody>
    <tr>
      <td id="cell1">&nbsp;On-Menu</td>
      <td id="cell2">&nbsp;On-Menu</td>
      <td  id="cell3">&nbsp;On-Menu</td>
      <td id="cell4">&nbsp;On-Menu</td>
    </tr>
    <tr>
      <td id="cell5">&nbsp;On-Menu</td>
      <td  id="cell6">&nbsp;On-Menu</td>
      <td  id="cell7">&nbsp;On-Menu</td>
      <td  id="cell8">&nbsp;On-Menu</td>
    </tr>
    <tr>
      <td id="cell9">&nbsp;On-Menu</td>
      <td  id="cell10">&nbsp;On-Menu</td>
      <td  id="cell11">&nbsp;On-Menu</td>
      <td 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>

JavaScript

var cachClickElem =0;
$("#menuitems").on('click','td',function(event){
cachClickElem = this.id
var lTable = document.getElementById("menulist");
    lTable.style.display = (lTable.style.display == "table") ? "none" : "table";

})
$("#menulist").on('click','td',function(event){
var getContent =$(this).text();
console.log(cachClickElem)
 if(cachClickElem != 0){
  $("#"+cachClickElem).text(getContent);
 }
})