JSFiddle - React, Tailwind, and code Playground

by Joe

HTML

<div class="container">
  <div class="row clearfix">
    <div class="col-md-12 column">

      <table class="table table-bordered table-hover order-list" id="tab_logic">
        <thead>
          <th class="text-center">
            Debit*
          </th>
        </thead>
        <tbody>
        <tr>
          <td>
            <input type="text" class="form-control" id="cashdeb' + counter + '" data-action="sumDebit" name="debit" placeholder="Debit amount"/>
          </td>
        </tr>
          <input type="button" class="add_Row adRow" id="add_Row" value="Add Row">
        </tbody>
      </table>

    </div>
  </div>
</div>

<!-- total -->


<div class="row">
  <div class="col-6">
    <div class="cashTotal">
      <p class="tableTotal">Total:</p>
    </div>
  </div>
  <div class="col-6">
    <input type="number" class="totaldeb" id="totaldbt" name="total" placeholder="Total Debit Amount" readonly>
  </div>
</div>

JavaScript

$(document).ready(function() {
  var counter = 0;

  $("#add_Row").on("click", function() {
    var newRow = $("<tr>");
    var cols = "";


    cols += '<td><input type="text" class="form-control" id="cashdeb' + counter + '" data-action="sumDebit" name="debit" placeholder="Debit amount"/></td>';
    cols += '<td><button type="button" class="adRow ibtnDel" style="width:70%;">x</button></a></td>';
    newRow.append(cols);

    var defVal = $("select[name=acctname]").find(":selected").val();
    if (defVal) {
      $("select[name=accountName]").find(`option[value=${defVal}]`).hide();
    }
    $("table.order-list").append(newRow);
    setValCashVal('accountName'.concat(counter));
    bindScript();
    counter++;
  });

  // delete function
  $("table.order-list").on("click", ".ibtnDel", function(_event) {
    $(this).closest("tr").remove();
    counter -= 1
  });

});

/* total */

$('body').on('change', '[data-action="sumDebit"]', function() {
  var total = 0;
  $('[data-action="sumDebit"]').each(function(_i, e) {
    var val = parseFloat(e.value);
    if (!isNaN(val))
      total += val;
  });
  $('#totaldbt').val(total);
});