JSFiddle - React, Tailwind, and code Playground

by Joe

HTML

<form id="driver">
  <table class="table table-bordered table-hover" >
    <thead>
      <tr>
        <th class="text-center text-info">
          #
        </th>
        <th class="text-center text-info">
          first name
        </th>
        <th class="text-center text-info">
          last name
        </th>

        <th class="text-center text-info">
          mobile num
        </th>
        <th class="text-center text-info">
          email id
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          1
        </td>
        <td>
          <input type="text" name='firstname' placeholder='first name' class="form-control" />
        </td>
        <td>
          <input type="text" name='lastname' placeholder='last name' class="form-control" />
        </td>
        <td>
          <input type="text" name='mobile' placeholder='mobile number' class="form-control" />
        </td>

        <td>
          <input type="text" name='email' placeholder='email' class="form-control" />
        </td>
      </tr>
      <input type="button" class="add_Row adRow button-add" id="add_row" value="Add Row">
      <tr id='addr1'></tr>
    </tbody>
  </table>
  <input type="submit" name="g" value="Submit">
  <pre id="output">hfghfgh</pre>



  <input type="text" name='sathya' placeholder='email' class="form-control" />
  <input type="text" name='jothi' placeholder='email' class="form-control" />
  <input type="text" name='joe' placeholder='email' class="form-control" />
  <input type="text" name='plumz' placeholder='email' class="form-control" />
</form>

CSS

pre {
  width: 100%;
  background-color: whitesmoke;
  white-space: pre-wrap;
}

JavaScript

$("form").submit(function(event) {
  var newFormData = [];
  jQuery('#driver tr:not(:first)').each(function(i) {
    var tb = jQuery(this);
    var obj = {};
    tb.find('input', 'select').each(function() {
      obj[this.name] = this.value;
    });
    obj['row'] = i;
    newFormData.push(obj);
  });
  console.log(newFormData);
  document.getElementById('output').innerHTML = JSON.stringify(newFormData);
  event.preventDefault();
});

$(document).ready(function() {
  $(".add_Row").click(function() {
    row = `<tr id="driver" class="jsrow"><td><input type="text" class="sno sel_text form-control" placeholder="A/c code" id=""cashAcctcode name="acctcode"></input></td><td><select class="sel_sel form-control status" for="accountName" id="accountName" name="accountName"><option value="">Choose an items</option><option value="acc1">Account 1</option><option value="acc2">Account 2</option><option value="acc3">Account 3</option></select></td><td><input type="text" class="form-control pname" placeholder='Enter your text here' name="narr" id='acc_narrat' data-toggle='modal' data-target='#accnarratModal'></input></td><td><input type="text" placeholder='Debit Amount' class='form-control task input-md' for="debit" name="debit" id='cashdeb' data-action='sumDebit'></input></td><td><input type="text" placeholder='Credit Amount' data-action='sumCredit' class='form-control comment input-md' name="credit" for="credit" id="crditCash" readonly></input></td><td><a class="dlt-icon"><button type="button" class="adRow" style="width:70%;">x</button></a></td></tr>`;
    $("table > tbody").append(row);
    var defVal = $("select[name=acctname]").find(":selected").val();
    if (defVal) {
      $("select[name=accountName]").find(`option[value=${defVal}]`).hide();
    }
    $(document).on('click', '.dlt-icon', function() {
      $(this).parents('tr.jsrow').first().remove();
    });
  });
});

function bindScript() {
  $(document).find('.sel_sel').on("change", function() {
   ...