How to convert Json formatt

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" onsubmit='return onSubmit(this)'>
  <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...

CSS

.add-btn {
  background: #680379 !important;
  border: 1px solid #dda0dd !important;
  color: #fff !important;
  padding: 3px;
  font-size: 14px;
  max-width: fit-content;
  padding-left: 15px;
  padding-right: 15px;
}

JavaScript

/* Get total */

$('body').on('change', '[data-action="sumDebit"]', function() { //Attach an event to body that binds to all tags that has the [data-action="sumDebit"] attribute. This will make sure all over dynamically added rows will have the trigger without us having to readd after ever new row.
    var total = 0;
    $('[data-action="sumDebit"]').each(function(_i, e) { //Get all tags with [data-action="sumDebit"]
        var val = parseFloat(e.value); //Get int value from string
        if (!isNaN(val)) //Make sure input was parsable. If not, result come back as NaN
            total += val;
    });
    $('#totaldbt').val(total); //Update value to total
});

/* Table */

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

function loadValues() {
  //move on this
  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"><td><input type="text" class="sno sel_text form-control" placeholder="A/c code"></input></td><td><select class="sel_sel form-control status" id="dropdown2" name="dropdown2"><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' id='acc_narrat' data-toggle='modal' data-target='#accnarratModal'></input></td><td><input type="text" placeholder='Debit Amount'...