JSFiddle - React, Tailwind, and code Playground

HTML

<!--Table on the left -->
    <div style="width: 140px; float: left;">
        <table id="table1">
            <tbody>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>6</td>
                </tr>
                <tr>
                    <td>7</td>
                    <td>8</td>
                </tr>
                <tr>
                    <td>9</td>
                    <td>10</td>
                </tr>
            </tbody>
        </table>
    </div>
    <!-- Rows on the right-->

    
    <!--2nd table-->
    <div style="width: 140px; float: left; margin-left: 12px;">
            <table id="table2">
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>4</td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>6</td>
                    </tr>
                    <tr>
                        <td>7</td>
                        <td>8</td>
                    </tr>
                    <tr>
                        <td>9</td>
                        <td>10</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- Rows on the right-->

    <!-- Make sure each input has a unique id-->
    <div style="width: 600px; float: right;">
        <div id="wrapper">
            <div>
              <input type="text" name="1" size="4" id="inp1" value="">
              <input type="text" name="2" size="4" id="inp2" value="">
              <input type="text" name="3" size="4" id="inp3" value="">
              <input type="text" name="4" size="4" id="inp4" value="">
...

CSS

table {
                border-collapse: collapse;
                border: 5px solid black;
                width: 100%;
            }
            td {
                width: 50%;
                height: 2em;
                border: 1px solid #ccc;
                background-color:orange;
                text-align:center;
                vertical-align:middle;
                font-weight:bold;
                cursor: pointer;
            }

JavaScript

//Code to add child and input fields dynamically
        // Starting number of inputs
        let count = 5;

        // Wrapper
        const wrapper = document.querySelector('#wrapper');

        document.querySelector('#btn').addEventListener('click', () => {

          const container = document.createElement('div');
          
          for (let i = 0; i < 5; i++) {
            // Increment the count to ensure that it is unique
            count++;

            // Create your new `<input>` element
            const input = document.createElement('input');
            input.type = 'text';
            input.name = count;
            input.size = '4';
            input.id = `inp${count}`;

            container.appendChild(input);
            
            // Optional: add empty whitespace after each child
            container.append(document.createTextNode(' '));
          }
          wrapper.appendChild(container);
        });
       //END code

       let currentInput = 1; 
       let bonusInput = 1;

        $("#table1 td").on('click',function(event){
            //gets the number associated with the click
            let num = $(this).text(); 
            //set it to input's value attribute
            $("#inp" + currentInput++).attr("value",num); 
        });

        //Bonus input
        $("#table2").on('click',function(event){
            let bon = event.target.textContent;
            $("#bonus" + bonusInput++).attr("value",bon);
        });

        $("input").hover( function(event) {
            //alert($('#selection1 input').serialize());
            //let num = $(this).attr("value");
            let parent = $(this).parent();
            $(parent.children()).each(function (index, element) {
              let num = $(element).val();
              //console.log(num);
              if (num) {
                  //Change input color on hover
                  $(this).css("backgroundColor","green");
                  //Change tables bgcolor on hover
   ...