JSFiddle - React, Tailwind, and code Playground

by Joe

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>

<div class="row">
  <!-- Existing Suppliers -->

  <div class="col-sm-6">
    <div class="col-12">
      <div class="row">
        <div class="col-12">
          <input class="form-control serch" id="supSearch" type="search" placeholder="Search Existing Suppliers..">
          <div class="selector">
            <select class="col-12 listbox newBox" name="List_0" size="20" id="excist_supp" style="height: 125px !important;">
              <option class="indexDrop">Choose Existing Suppliers</option>
              <option value="0000">Komal </option>
              <option value="0001">Ranjeet</option>
              <option value="0002">Vishal </option>
              <option value="0003">Gaurav</option>
              <option value="0004">Dhanpat</option>
              <option value="0005">Joe</option>
              <option value="0006">Gowri</option>
              <option value="0007">shankar</option>
              <option value="0008">Dhanpat</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Table -->

  <div class="col-5">
    <div class="container">
      <div class="row clearfix">
        <div class="table-wrapper">
          <div class="table-scroll">
            <table id="letterTable" class="table table-bordered table-striped order-scroll order-list" style="width: 95%;">
              <thead>
                <tr style="background-color: #680f79;color: #fff;">
                  <th class="text-center">Supplier Name</th>
                  <th class="text-center">Supplier Code</th>
                  <th class="text-center">Action</th>
               ...

JavaScript

$("#excist_supp").on("change", function() {
  $(".indexDrop").hide();

  var newText = $("#excist_supp option:selected").text();
  var newValue = $("#excist_supp option:selected").val();

  $("#letterTable tbody").append('<tr><td><input type="text" id="sm_supp" value="' + newText + '" class="form-control newStyle1" name="sm_supp" readonly></td><td><input type="text" id="sm_code" value="' + newValue + '" class="form-control newStyle2" name="sm_code" readonly></td><td><button type="button" class="adRow ibtnDel newExcist" style="width:30%;position: relative;right: 25%; margin-bottom:0px">x</button></a></td></tr>');




  $("#letterTable tr").each(function(i) {

    var count = (i) - 1;
    if (i === 0) return;
    var input1 = $(this).find('.newStyle1');
    var input2 = $(this).find('.newStyle2');

    // id
    input1.eq(0).attr("id", "sm_supp" + count); // Text fields
    input2.eq(0).attr("id", "sm_code" + count);

    // name
    input1.eq(0).attr("name", "sm_supp[" + count + "]"); // Text fields
    input2.eq(0).attr("name", "sm_code[" + count + "]");
  });

});

/* compare two fields */

$('#excist_supp').change(function() {
  $("#letterTable tr").each(function(i) {

    var listVal = $('#excist_supp').val();
    var tableVal = $('.newStyle2').val();
    var nawTab = JSON.stringify(tableVal);

    if (listVal == nawTab) {
      alert('Matching!');
      return true;
    } else {
      alert('Not matching!');
      return false;
    }
  });
});