JSFiddle - React, Tailwind, and code Playground

HTML

<table id="blacklistgrid_1"  class="table table-bordered table-hover table-striped">
      <thead>
        <tr>
          <th style="vertical-align:middle">Products</th>
          <th style="vertical-align:middle">Pack Of</th>
          <th style="vertical-align:middle">Quantity</th>
          <th style="vertical-align:middle">Volume</th>
          <th style="vertical-align:middle">Unit</th>
          <th style="vertical-align:middle">Rebate Amount</th>
        </tr>
      </thead>
      <tbody class="apnd-test">
        <tr id="reb1_1">
          <td>
            <div class="btn-group">
              <select name="product_id_1[1]" id="product_id_1_1" class="form-control prod_list">
                <option value=""  selected='selected'>Select Product</option>
                <option value="5" >Chesse</option>
                <option value="8" >Laptop an</option>
                <option value="9" >Prosecco</option>
                <option value="10" >Coffee</option>
                <option value="11" >Tea</option>
              </select>
            </div>
          </td>
          <td><input type="text" name="pack[1]" id="pack_1" value="" class="form-control" size="8"/></td>
          <td><input type="text" name="quantity[1]" id="quantity_1" value="" class="form-control" size="8"/></td>
          <td><input type="text" name="volume[1]" id="volume_1" value="" class="form-control" size="8"/></td>
          <td>
            <div class="btn-group">
              <select name="units[1]" id="units_1" class="form-control">
                <option value=""  selected='selected'>Select Unit</option>
                <option value="5" >Microsecond</option>
                <option value="7" >oz</option>
                <option value="9" >ml</option>
                <option value="10" >L</option>
                <option value="12" >gms</option>
              </select>
            </div>
          </td>
          <td><input type="text" name="amount[1]" id="amount_1" value=""...

JavaScript

$(function () {
              $(document).delegate('.products','click',function (e) {
                var table_id = $(this).closest('table').attr('id');
                var no = table_id.match(/\d+/)[0];
                var first_row = $('#'+table_id).find('tbody tr:first').attr('id');
                var toBeCloned = $('#'+first_row).find('td:first').find('select:last');
                var new_row = toBeCloned.clone();
                var idCounter = toBeCloned.attr('id').split('_');
                var new_id = 'product_id_'+no+'_' + (parseInt(idCounter[3]) + 1);
                var new_name = 'product_id_'+no+'['+(parseInt(idCounter[3]) + 1+']');
           
                var elementToAppendTo = $('#'+table_id).find('tbody tr:first .btn-group:first'); 
                $(new_row).appendTo(elementToAppendTo).attr('id', new_id);
                $(new_row).appendTo(elementToAppendTo).attr('name', new_name);
            
                $('<button  id="'+new_id+'"style="color:#C00; opacity: 2;margin-top: 6px;" type="button" class="close delete" data-dismiss="alert" aria-hidden="true">&times;</button>').appendTo($(elementToAppendTo));
           
        //function to delete HTML select element from add rebate by product grid 
        //$('.delete').on('click', deleteRow);
        $(document).delegate('.delete','click', function(){    
          var prd_id = $(this).attr("id");
          $(this).remove();
          $("#" + prd_id).remove();      
        });
      });
    });