JSFiddle - React, Tailwind, and code Playground

by Bhavik Bamania

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/css/bootstrap.min.css">
<table class="table" id="req_table">
  <thead>
    <tr>
      <th class="col-md-2">Item</th>
      <th class="col-md-2">Store Description</th>
      <th class="col-md-2">Measurement Unit</th>
      <th class="col-md-1">Quantity Demanded</th>
      <th class="col-md-1">Rate</th>
      <th class="col-md-1">Stock In Hand</th>
      <th class="col-md-3">Remarks(If Any)</th>
    </tr>
  </thead>

  <tbody>
    <tr class="tr_clone">
      <td class="col-md-2"><select class="select2 required col-md-12 item_measurement" id="item_measurement_id" autocomplete="off" required="true" name="item_measurement_id[]"><option value="" selected="selected">Select Item</option><option value="1">pAPER</option><option value="2">KirloskarGREEN</option></select></td>
     
      <td class="col-md-2"><select class="required form-control col-md-12" id="measurement_unit_id" autocomplete="off" required="true" name="measurement_unit_id[]"><option value="" selected="selected">Select Unit</option><option value="1">Test</option></select></td>
      <td class="col-md-1"><input class="form-control required" id="quantity_demanded" step="0.01" placeholder="Quantity Demanded" autocomplete="off" required="true" name="quantity_demanded[]" type="number"></td>
      <td class="col-md-1"><input class="rate form-control required" id="rate" placeholder="Rate" readonly="1" step="0.01" autocomplete="off" required="true" name="rate[]" type="number"></td>
      
    </tr>
  </tbody>
</table>

<a href="javascript:void(0)" class="btn btn-warning add_more_item">Add More Item <i class="fa fa-plus-square"...

JavaScript

$(".select2").select2();
$('.add_more_item').click(function(e) {

	$latest_tr 	= $('#req_table tr:last');
  $('select.select2').select2('destroy');

	$clone 			= $latest_tr.clone();

	$latest_tr.after($clone);
	$('select.select2').select2();
	$clone.find(':text').val('');
	item++;
	show_hide_item(item);
});

$('.remove_item').click(function(e) {
	item--;
  $latest_tr.remove();
	e.preventDefault();
	show_hide_item(item);
});

function show_hide_item( item ) {
	if(item > 1) {
		$('.remove_item').show();
	}else{
		$('.remove_item').hide();
	}
}