How to convert Json formatt

by Joe

HTML

<div class="form-group col-4" style="margin-bottom: 20px;">
  <label class="col-sm-12 control-label p-sm-0 input-group" for="acctcode">Cash Account :</label>
  <select class="form-control selectsch_items status" name="acctname" id="cashAc" required>
    <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>
</div>
<input type="button" class="add_Row adRow" id="add_row" value="Add Row">
<div class="container">
  <div class="row clearfix">
    <div class="col-md-12 column">

      <table class="table table-bordered table-hover" id="tab_logic">
        <thead>
          <tr style="background-color: #680779; color: #fff;">
            <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>
          </tr>
        </thead>
        <tbody>
          <tr id='addr1'></tr>
        </tbody>
      </table>

    </div>
  </div>
</div>

<div class="form-group ml-auto mt-2 mb-0">
  <div class="col-md-12 stockform_submit" id="">
    <button type="submit" class="btn add-btn submit-btn load" id="cashSub">Submit</button>
    <button type="reset" class="btn btn-default reset-btn stock_rst" style="left: 0%" id="reset-btn">Reset</button>
  </div>
</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

$(document).ready(function() {
  $(".add_Row").click(function() {
    row = `<tr id="tasklist"><td><input type="text" class='sno sel_text form-control' for="acctcode" name="acctcode" id="cashAcctcode" placeholder='A/c code'></input></td><td><select class="sel_sel form-control status" id="accountName" for="actname" name="accountName" value=""><option>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' for='pay_narrat' name='pay_narrat' placeholder='Enter your text here' id='acc_narrat' data-toggle='modal' data-target='#accnarratModal'></input></td><td><input type="text" placeholder='Debit Amount' class='form-control task input-md' id='cashdeb' name='debit' for='debit' data-action='sumDebit'></input></td><td><input type="text" placeholder='Credit Amount' id='crditCash' name='credit' for='credit' data-action='sumCredit' class='form-control comment input-md' readonly></input></td></tr>`;
    $("table > tbody").append(row);
    var defVal = $("select[name=acctname]").find(":selected").val();
    if (defVal) {
      $("select[name=accountName]").find(`option[value=${defVal}]`).hide();
    }
    bindScript();
  });

  // $('.load').click(function() {
  //     loadValues();
  // });

});

$('select[name=acctname]').on('change', function() {
  $("select[name=accountName]").find('option').show();
  var from = $(this).find(":selected").val();
  $("select[name=accountName]").val('');
  if (from != "") {
    debugger;
    $("select[name=accountName]").find(`option[value=${from}]`).hide();
  }
});
// Get value from dropdown to show text box using class
function bindScript() {
  $(document).find('.sel_sel').on("change", function() {
    $(this).parent().parent().find('.sel_text').val($(this).val());
  })
};

(function($) {
  $.fn.serializeFormJSON = function() {

    var o = {};
    var a = this.serializeArray();
    $.each(a,...