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>
          <tr style="background-color: #680779; color: #fff;">
            <th class="text-center">
              Account Code
            </th>
            <th class="text-center">
              A/c Name*
            </th>
            <th class="text-center">
              Narration*
            </th>
            <th class="text-center">
              Debit*
            </th>
            <th class="text-center">
              Credit
            </th>
            <th class="text-center">
              Action
            </th>
          </tr>
        </thead>
        <tbody>
          <tr id="fst_row">
            <td>
              <input type="number" id="payacc_code" placeholder='Enter A/c code' for="acctcode" name="acctcode" class="form-control sel_text" />
            </td>
            <td>
              <select class="form-control sel_sel" id="payacc" name="actname" for="actname">
                <!-- <option value="">Select TDS A/c name</option>
                                                                            <option value="1">TDS A/c 1</option>
                                                                            <option value="2">TDS A/c 2</option>
                                                                            <option value="3">TDS A/c 3</option> -->
              </select>
            </td>
            <td>
              <input type="text" class="form-control" id="pay_narrat" name="narr" for="narr" placeholder="Enter your text here" data-toggle="modal" data-target="#narratModal" />
            </td>
            <td>
              <input type="number" id="paydeb" value="100" name="debit" for="debit" placeholder='Debit Amount' data-action="sumDebit" class="form-control" readonly />
            </td>
            <td>
              <input...

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' + counter + '" name="acctcode"/></td>';
    cols += '<td><select class="form-control sel_sel status" id="accountName' + counter + '" name="accountName" for="acctcode"><option>Choose A/c Name</option></select></td>'
    cols += '<td><input type="text" class="form-control pname" name="narr" placeholder="Enter your text here" id="acc_narrat' + counter + '" data-toggle="modal" data-target="#accnarratModal"/></td>';
    cols += '<td><input type="text" class="form-control" id="cashdeb' + counter + '" data-action="sumDebit" name="debit"/></td>';
    cols += '<td><input type="text" class="form-control comment" id="crditCash' + counter + '" data-action="sumCredit" name="credit" readonly/></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
  });

});

/* Json */

(function($) {
  $.fn.serializeFormJSON = function() {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
      if (o[this.name]) {
        if (!o[this.name].push) {
          o[this.name] = [o[this.name]];
        }
        o[this.name].push(this.value || '');
      } else {
        o[this.name] = this.value || '';
      }
    });
    return o;
  };
})(jQuery);
$('form').submit(function(e) {
  e.preventDefault();
  var newFormData = [];
  // var...