JSFiddle - React, Tailwind, and code Playground

by Joe

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<!-- List box -->

<div class="col-sm-6">
  <div class="col-12">
    <div class="row">
      <div class="col-12">
        <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>

<!-- Small 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">
            <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>
              </tr>
            </thead>
            <tbody id="mytbody" style="text-align: center;">

            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.letterSub {
        position: relative;
        top: 25px;
    }
    
    .order-scroll table.order-scroll {
        width: 100%;
        /* border-collapse: collapse; */
        border-spacing: 0;
    }
    /* To display the block as level element */
    
    table.order-scroll tbody,
    table.order-scroll thead {
        display: block;
    }
    
    table.order-scroll tbody {
        /* Set the height of table body */
        height: 130px;
        /* Set vertical scroll */
        overflow-y: auto;
        /* Hide the horizontal scroll */
        overflow-x: hidden;
    }
    
    .listbox {
        background: white;
        background: -webkit-linear-gradient(#ccc, white);
        background: -o-linear-gradient(#ccc, white);
        background: -moz-linear-gradient(#ccc, white);
        background: linear-gradient(#fff, white);
        border: 1px solid #ced4da;
        overflow: auto;
    }
    
    .listbox option {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    .listbox option {
        padding: 5px;
        cursor: pointer;
    }
    
    .listbox option:hover {
        background-color: #bbb;
    }
    
    .listbox option.active {
        background: rgb(77, 176, 82);
    }
    
    option {
        -webkit-transition: background-color 200ms linear;
        -moz-transition: background-color 200ms linear;
        -o-transition: background-color 200ms linear;
        -ms-transition: background-color 200ms linear;
        transition: background-color 200ms linear;
    }
    
    .listbox::-webkit-scrollbar {
        width: 8px;
        border: 1px solid #ced4da;
    }
    
    .listbox::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.1);
    }
    
    .listbox::-webkit-scrollbar-thumb {
        background: gray;
    }
    
    
    #excist_supp {
        height: 440px;
        width: 100%;
        margin: 10px;
        text-align: center;
        margin-bottom: 0px;
    }
    
    .selector {
       ...

JavaScript

// Small table

// Exiscisting supplier dropdown change function - for new method
var temp = [];
$("#excist_supp").on("change", function() {

  if (!check()) {
    $(".indexDrop").hide();

    var newText = $("#excist_supp option:selected").text();
    var newValue = $("#excist_supp option:selected").val();
    console.log(newText, 'not yet to delete');
    console.log(newValue, 'not yet to delete');

    // delete button
    $("table.order-list").on("click", ".ibtnDel", function(_event) {
      var $row = $(this).closest("tr"); // Find the row
      var $text = $row.find(".newStyle1").val(''); // Find the text
      
      if(temp.includes($row.find(".newStyle2").val())){
        temp = temp.filter(v => v != $row.find(".newStyle2").val())
      } 
      
      
      var $secTd = $row.find(".newStyle2").val('');
      $(this).closest("tr").remove();
      delete newText;
      delete newValue;

      console.log(newText, 'value deleted');
      console.log(newValue, 'value deleted');
    });


    $("#letterTable tbody").append('<tr><td><input type="text" id="sm_supp" value="' + newText + '" class="form-control newStyle1" name="sm_supp"></td><td><input type="text" id="sm_code" value="' + newValue + '" class="form-control newStyle2" name="sm_code"></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;
      // alert(count);
      if (i === 0) return;
      var input1 = $(this).find('.newStyle1');
      var input2 = $(this).find('.newStyle2');

      // id
      // Dropdowns increment
      input1.eq(0).attr("id", "sm_supp" + count); // Text fields
      input2.eq(0).attr("id", "sm_code" + count);
      input1.eq(0).attr("name", "reqpartys[" + count + "].pname"); // Text fields
      input2.eq(0).attr("name", "reqpartys[" + count + "].pacd");
    });
  }

});

/* compare two fields and not...