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>

<div class="form-group col-4" style="margin-bottom: 20px;">
  <label class="col-sm-12 control-label p-sm-0 input-group">Cash Account :</label>
  <select class="form-control selectsch_items status" name="dropdown1" id="dropdown1" 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>

<div class="container">
  <div class="row clearfix">
    <div class="col-md-12 column">
      <form>
        <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>
            <input...

JavaScript

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

function loadValues() {
  var mainTable = $('#tab_logic');
  var tr = mainTable.find('tbody tr');
  console.log(tr.length)
  tr.each(function() {
    tmpArr = [];
    $(this).find('td').each(function() {

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

    });
    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></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' class='form-control task input-md' id='cashdeb'data-action='sumDebit'></input></td><td><input type="text" placeholder='Credit Amount' data-action='sumCredit' class='form-control comment input-md' readonly></input></td></tr>`;
    $("table > tbody").append(row);
    var defVal = $("select[name=dropdown1]").find(":selected").val();
    if (defVal) {
      $("select[name=dropdown2]").find(`option[value=${defVal}]`).hide();
    }
  });

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

$('select[name=dropdown1]').on('change', function() {
  $("select[name=dropdown2]").find('option').show();
  var from = $(this).find(":selected").val();
  $("select[name=dropdown2]").val('');
  if (from != "") {
    debugger;
    $("select[name=dropdown2]").find(`option[value=${from}]`).hide();
  }
});