JSFiddle - React, Tailwind, and code Playground

HTML

<form method="post" action="test.php">
    <input type="text" name="field1" class="class1"><span class="info"></span><br>
 <input type="text" name="field2" class="class1"><span class="info"></span><br>
 <input type="text" name="field3" class="class1"><span class="info"></span>
 
  <table class="invent" id="product">
                    <thead>
                        <tr>
                            <th class="sold col-md-3"><span>Code:
                                </span>
                            </th>
                            <th class="address">
                                <span>Product Description</span>
                            </th>


                        </tr>
                    </thead>

                    <tbody>
                        <tr>
                            <td class="product" name="code"><a class="cut">-</a><span contenteditable></span></td>

                            <td class="product" name="productName"><a class="cut">-</a><span onchange="checkInput()" contenteditable></span></td>
                            <!-- <td><a class="cut">-</a><span contenteditable></span></td> -->
                            <!-- <td><a class="cut">-</a><span contenteditable></span></td> -->
                        </tr>
                    </tbody>



                </table>
</form>

JavaScript

$('input[type=text]').on('change', function(){
  var input=$(this);
  //do your ajax call here
  alert('this can be an ajax call');
  input.next('span.info').html(input.val());
});

function checkInput(){

}

$('span[name=pro]').on('change',function(){
alert("hi");
});