JSFiddle - React, Tailwind, and code Playground

HTML

<body onload=populateFields() >

    <p>Click on a cell to have it populate the text fields below<p>

    <table border="1" onclick="populateFields()" style=font-size:11; cellspacing="1" cellpadding="5">
        <tr><td>apple</td><td>orange</td><td>banana</td><td>peach</td></tr>
        <tr><td>tomato</td><td>potato</td><td>onion</td><td>garlic</td></tr>
        <tr><td>chicken</td><td>fish</td><td>beef</td><td>pork</td></tr>
    </table>

    <form>
        <p>The cells you clicked on contain this data:</p>
        <input type="text" name="item1" id="txtCellData"></input>
        <input type="text" name="item2" id="textCellData2"></input>
        <input type="text" name="item3" id="textCellData3"></input>
        </form></body>
<script>
    var index=0;
    function populateFields(){
            //put all tds in an array
            var alltds = document.getElementsByTagName("td");
         
            //go through each item in the array
            for (var i in alltds) {
              alltds[i].onclick = function (){
    
                 
                 if(index==1){txtCellData.value = this.innerHTML;}
                    else{
                        setThis(this.innerHTML);
                        }
              }
            }
    
            if(index<3){
                 index++;
                }else{
                       index = 1;
                      }
               
       
    }

        function setThis(value) {
            document.getElementById("textCellData"+index).value = value;
        }

        </script>

CSS

td:hover { cursor: hand; color: blue; font-weight: bold; background: #FFDE00; }