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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />


<form class="form-horizontal" action="" method="post" id="contactForm">
  <div class="row">
    <!-- voucher number -->

    <div class="col-4">
      <label class="col-sm-8 control-label p-sm-0">Voucher Number :</label>
      <input type="number" id="vocNum" value="1" class="form-control vocnum-box" name="vocNum" readonly />
    </div>

    <!-- voucher date -->

    <div class="form-group col-3 rfdate">
      <label class="col-sm-5 control-label p-sm-0">Voucher Date :</label>
      <div class="input-group vcdate datepic" id="vocdate">
        <input type="text" class="form-control" id="vochDate" />
        <span class="input-group-addon">
          <i class="glyphicon glyphicon-calendar"></i>
        </span>
      </div>
    </div>
  </div>

  <!-- Reference number -->

  <div class="row">
    <div class="col-4">
      <label class="col-sm-12 control-label p-sm-0">Ref Number :</label>
      <input type="number" id="cashref" placeholder="Optional" class="form-control" name="cashref" />
    </div>

    <!-- Bill type -->

    <div class="form-group col-4"...

JavaScript

'use strict';

$(function() {
  // add row click.
  $(".add_Row").on('click', function() {
    // use .clone() for copy all first 'tr' tag
    // use :eq([number]) for target element, eq(0) is first tr in tbody.
    $("table > tbody").append($('tbody > tr:eq(0)').clone());
  });
  
  // form submit
  $('form').submit(function(e) {
    e.preventDefault();
    let data = [];
    // count all tr
    let is_length = $('tbody > tr').length;
    console.log(is_length, ' <--- is length');

    let el = function(is_name, is_num){
      return $(`[name=${is_name}]:eq(${is_num})`).val();
    }

    for(let i = 0; i< is_length; i++){
      data.push({
        narr: el('narr',i),
        acctcode: el('acctcode',i),
        debit: el('debit',i),
        actname: el('actname',i),
        credit: el('credit',i)
      });
    }
 
    console.log(data);
  });
});