JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <div class="container commonDivInvoice">
      <div class="form-row">

        <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-2">
          <label for="supplierInput">Supplier</label>
          <select name="supplierInput" id="supplierInput" class="form-control">
            <option disabled="disabled" selected="true">select supplier
            </option>
            <option>Supplier 1</option>
            <option>Supplier 2</option>

          </select>
          <input type="hidden" id="selectedtable" name="" value="">
        </div>





      </div>
      <div class="row tableInvoice" id="commonDvScroll">
        <table class="table table-bordered" id="tableInvoice">
          <thead>
            <tr>
              <th id="itemNameth" class="commanth">Item Name</th>
              <th id="itemCodeth" class="commanth">Code</th>
              <th id="mrpth" class="commanth">Mrp</th>
              <th id="purRateth" class="commanth">Pur.Rate</th>
              <th id="unitQtyth" class="commanth">Unit Qty</th>
              <th id="discPercentageth" class="commanth">Disc%</th>
              <th id="discAmtth" class="commanth">Disc Amt</th>
              <th id="gstPercentageth" class="commanth">Gst%</th>
              <th id="gstAmtth" class="commanth">Gst Amt</th>
              <th id="totalAmtth" class="commanth">Total Amount</th>

            </tr>
          </thead>
          <tbody>

       ...

JavaScript

var CostPrice = "";
    var totalAmount = "";
    var unitQuantity = 0;
    var unitQuantityOnDisc = 0;
    var purchaseRateOnDisc = 0;
    var purchaseRate = 0;
    var totalAmount = "";
    var discPercentage = "";
    var discAmount = "";
    var totalAmountOnDisc = "";
    var subTotalOnDisc = 0;
    var gstPercentage = "";
    var gstAmount = "";
    var totalAmountOnGst = "";
    var total = 0;
    var supplierCode = "";
    var totalDiscountAmt = 0;
    var totalGstAmt = 0;
    var totalUnitQty = 0;
    var subtotal = 0;
    var totalAfterGrnDisc = 0;
    var totalRoundOff = 0;
    var totalAfterfreightAmt = 0;
    var totalAftercommissionAmt = 0;
    var mrpOnDisc = 0;
    var tableData = {
      "ALMOND CHBAR~2402": {
        "itemName": "ALMOND CHBAR",
        "itemCode": "2402",
        "costPrice": 20.0,
        "gstPercentage": 14.5,
        "mrp": 30.0
      },
      "A BR SB EX~333": {
        "itemName": "A BR SB EX",
        "itemCode": "333",
        "costPrice": 1.0,
        "gstPercentage": 0.0,
        "mrp": 1.0
      }
    }

    var tableData1 = {
      "White rice~1001": {
        "itemName": "White rice",
        "itemCode": "1001",
        "costPrice": 50.0,
        "gstPercentage": 5,
        "mrp": 65.0
      },
      "Brown rice~333": {
        "itemName": "Brown rice",
        "itemCode": "1002",
        "costPrice": 90,
        "gstPercentage": 5.0,
        "mrp": 110
      }
    }

    var tableDataGlob = ''; //global object
    $("#supplierInput").on("change", function (e) {
      $("tbody").empty();
      $("tfoot").empty();
      if (this.value == 'Supplier 1') {
        tableDataGlob = tableData;
        populateData(tableDataGlob)
      } else {
        tableDataGlob = tableData1;
        populateData(tableDataGlob)
      }
    });


    function populateData(data) {

      function rowappend(tbody) {
        const markup =
          `<tr>
                  <td>
                    <input type="text" class="form-control...