JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<table class="table table-bordered">
  <tr>
    <th>
      <input class='check_all' type='checkbox' onclick="select_all()" />
    </th>
    <th>No</th>
    <th>Item ID</th>
    <th>Description</th>
    <th>UOM</th>
    <th>Price</th>
    <th>Tax</th>
    <th>Quantity</th>
    <th>Discount</th>
    <th>Amount</th>

  </tr>

  <tr>
    <td>
      <input type='checkbox' class='case' />
    </td>
    <td><span id='snum'>1.</span></td>
    <td>
      <input type="text" class="form-control" id="productcode_1" name="productcode[]">
    </td>
    <td>
      <input type="text" class="form-control" id="description_1" name="description[]">
    </td>
    <td>
      <input type="text" class="form-control" id="uom_1" name="uom[]">
    </td>
    <td>
      <input type="text" class="form-control price" id="price_1" name="price[]">
    </td>
    <td>
      <input type="text" class="form-control tax" id="tax_1" name="tax[]">
    </td>
    <td>
      <input type="text" class="form-control quantity" id="quantity_1" name="quantity[]">
    </td>
    <td>
      <input type="text" class="form-control discount" id="discount_1" name="discount[]">
    </td>
    <td>
      <input type="text" class="form-control amount" id="amount_1" name="amount[]">
    </td>
    <td>
      <button type="button" class='btn btn-danger delete'>-</button>
    </td>
    <td>
      <button type="button" class='btn btn-success addmore'>+ </button>
    </td>
  </tr>

  <tfoot>
    <th></th>
    <th></th>
    <th></th>
    <th></th>
    <th></th>
    <th style="text-align:center;" class="total">0<b></b></th>
  </tfoot>

</table>

JavaScript

$(".delete").on('click', function() {
    $('.case:checkbox:checked').parents("tr").remove();
    $('.check_all').prop("checked", false);
    check();
  });
  var i = $('table tr').length - 1;


  $(".addmore").on('click', function() {
    count = $('table tr').length - 1;

    var data = "<tr><td><input type='checkbox' class='case'/></td><td><span id='snum" + i + "'>" + count + ".</span></td>";
    data += "<td><input class='form-control' type='text' id='productcode_" + i + "' name='productcode[]'/></td> <td><input class='form-control' type='text' id='description_" + i + "' name='description[]'/></td><td><input class='form-control' type='text' id='uom_" + i + "' name='uom[]'/></td><td><input class='form-control price' type='text' id='price_" + i + "' name='price[]'/></td><td><input class='form-control tax' type='text' id='tax_" + i + "' name='tax[]'/></td><td><input class='form-control quantity' type='text' id='quantity_" + i + "' name='quantity[]'/></td><td><input class='form-control discount' type='text' id='discount_" + i + "' name='discount[]'/></td><td><input class='form-control amount' type='text' id='amount_" + i + "' name='amount[]'/></td><td><input class='form-control' type='text' id='tamount_" + i + "' name='tamount[]'/></td></tr>";
    $('table').append(data);
    row = i;

    $('#productcode_' + i).autocomplete({
      source: function(request, response) {
        $.ajax({
          url: 'ajax.php',
          dataType: "json",
          method: 'post',
          data: {
            name_startsWith: request.term,
            type: 'items_table',
            row_num: row

          },

          success: function(data) {
            response($.map(data, function(item) {
              var code = item.split("|");

              return {
                label: code[0],
                value: code[0],
                data: item

              }
            }));
          }
        });
      },

      autoFocus: true,
      minLength: 0,
      select:...