JSFiddle - React, Tailwind, and code Playground

by Joe

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 sel_text" id="cashAcctcode" name="acctcode' + counter + '"/></td>';
    cols += '<td><select class="form-control sel_sel status" id="accountName" name="accountName' + counter + '"><option value="">Select A/c name</option><option th:each="cashtype:${cashNameList}" th:value="${cashtype.acctcode}" th:text="${cashtype.acctname}"></option></select></td>'
    cols += '<td><input type="text" class="form-control pname" name="narr' + counter + ' " placeholder="Enter your text here" id="acc_narrat" data-toggle="modal" data-target="#accnarratModal"/></td>';
    cols += '<td><input type="text" class="form-control" id="cashdeb" data-action="sumDebit" name="debit' + counter + '"/></td>';
    cols += '<td><input type="text" class="form-control comment" id="crditCash" data-action="sumCredit" name="credit' + counter + '" readonly/></td>';

    cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger" value="x"></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);
    counter++;
  });

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


});