JSFiddle - React, Tailwind, and code Playground

by Joe

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>


<!-- table -->

<a id="add_row" class="btn btn-primary float-right adRow">Add New</a>
<div class="col-md-12 table-responsive">
  <table class="table table-bordered table-hover table-sortable" id="tab_logic">
    <thead style="background-color: #680779;
                                                        color: #fff;">
      <tr>
        <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" style="border-top: 1px solid #ffffff; border-right: 1px solid #ffffff;">
          Action
        </th>
      </tr>
    </thead>
    <tbody>
      <tr id="fst_row">
        <td>
          <input type="number" id="payacc_code" placeholder='Enter A/c code' class="form-control" />
        </td>
        <td>
          <select class="form-control" id="payacc">
            <option value="">Select TDS A/c name</option>
            <option value="1">JOE</option>
            <option value="2">JOE...

JavaScript

/* TABLE JS */

$(document).ready(function() {
  $("#add_row").on("click", function() {
    // Dynamic Rows Code

    // Get max row id and set new id
    var newid = 0;
    $.each($("#tab_logic tr"), function() {
      if (parseInt($(this).data("id")) > newid) {
        newid = parseInt($(this).data("id"));
      }
    });
    newid++;

    var tr = $("<tr></tr>", {
      id: "addr" + newid,
      "data-id": newid
    });

    // loop through each td and create new elements with name of newid
    $.each($("#tab_logic tbody tr:nth(1) td"), function() {
      var td;
      var cur_td = $(this).clone();

      var children = cur_td.children();
      $(cur_td).find('#acc_narrat').removeAttr('data-toggle');

      // add new td and element if it has a nane
      if ($(this).data("name") !== undefined) {
        td = $("<td></td>", {
          "data-name": $(cur_td).data("name")
        });

        var c = $(cur_td).find($(children[0]).prop('tagName')).clone().val("");
        c.attr("name", $(cur_td).data("name") + newid);
        c.appendTo($(td));
        td.appendTo($(tr));
      } else {
        td = $("<td></td>", {
          'text': $('#tab_logic tr').length
        }).appendTo($(tr));
      }
    });

    // add the new row
    $(tr).appendTo($('#tab_logic'));

    $(tr).find("td button.row-remove").on("click", function() {
      $(this).closest("tr").remove();
    });
  });

  // Sortable Code
  var fixHelperModified = function(e, tr) {
    var $originals = tr.children();
    var $helper = tr.clone();

    $helper.children().each(function(index) {
      $(this).width($originals.eq(index).width())
    });

    return $helper;
  };

  $(".table-sortable tbody").sortable({
    helper: fixHelperModified
  }).disableSelection();
  $(".table-sortable thead").disableSelection();
  $("#add_row").trigger("click");
});

/* POPUP JS */
$('.cashmodal_btn').on('click', function() {
  let val = $('.myInput').val();
 ...