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>

<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" for="vouchno">Voucher Number :</label>
      <input type="number" id="vocNum" value="1" class="form-control vocnum-box" name="vouchno" readonly />
    </div>

    <!-- voucher date -->

    <div class="form-group col-3 rfdate">
      <label class="col-sm-5 control-label p-sm-0" for="vouchdt">Voucher Date :</label>
      <div class="input-group vcdate datepic" id="vocdate">
        <input type="text" class="form-control" id="vochDate" name="vouchdt" />
        <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" for="RefNumber">Ref Number :</label>
      <input type="number" id="cashref" placeholder="Optional" class="form-control" name="refno" />
    </div>

    <!-- Bill type -->

    <div class="form-group col-4" style="margin-bottom: 0px;">
      <label class="col-sm-12...

CSS

@media (min-width: 576px) .container {
  max-width: 0px !important;
}

JavaScript

// Table dynamic with Json format

var status;
var sno = [];
var load;
var no_rows = 0;
var row;

function submitVal() {
  var mainArr = [];
  var tmpArr = [];
  var mainTable = $('#tab_logic');
  var tr = mainTable.find('tbody tr');
  console.log(tr.length)
  tr.each(function() {
    tmpArr = [];
    $(this).find('td').each(function() {
      //get attr id
      let title = $(this).find('input, selet').attr('id');

      var values = $(this).find('input, select').val();

      //input json format
      let pushing = $.parseJSON('{ "' + title + '": "' + values + '" }');

      tmpArr.push(pushing);

    });
    mainArr.push(tmpArr);
  });
  console.log(mainArr);

}

$(document).ready(function() {
  $(".add_Row").click(function() {
    row = `<tr id="tasklist" 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) {
     ...