JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<form>
    <div class="container-fluid">      
	<div class="row">
          	
		<table class="table table-hover table-bordered styled" id="lineitem">
			<thead>
				<tr>
					<th class="text-center">#</th>
					<th class="col-md-2">PRODUCT/SERVICE</th>
					<th class="col-md-6">DESCRIPTION</th>
					<th class="col-md-1 text-right">QTY</th>
                    <th class="col-md-1 text-right">RATE</th>
                    <th class="col-md-1 text-right">AMOUNT</th>
                    <th></th>
				</tr>
			</thead>
			<tbody class="invoicemap">
				<tr>
					<td class="count vert-align text-center">1</td>
                    <td ><select name="itemID[]" class="itemID form-control"><option disabled selected>Product/Service</option></select></td>
                    <td ><input class="form-control" type="text" name="describe" value=""/></td>
                    <td ><input id="qty" class="qty form-control" type="text" name="qty" value="0"/></td>
                    <td ><input id="rate" class="rate form-control" type="text" name="rate" value="8.00"/></td>
                    <td ><input id="amount" class="amount form-control" type="text" name="amount" value="0.00"/></td>
                    <td class="vert-align text-center"><a href="#"><span class="glyphicon glyphicon-trash"></span></a></td>
				</tr>
                <tr>
					<td class="count vert-align text-center">2</td>
                    <td ><select name="itemID[]" class="itemID form-control"><option disabled selected>Product/Service</option></select></td>
                    <td ><input class="form-control" type="text" name="describe" value=""/></td>
                    <td ><input id="qty" class="qty form-control" type="text" name="qty" value="0"/></td>
                    <td ><input id="rate" class="rate form-control" type="text" name="rate"...

JavaScript

$(function() {
		CalculateTotal();
		// Adding the change events for the Price and 
		// quantity fields only..
		// Changing the total should not affect anything
		$('#qty , #rate, #discount').on('change', function() {
			UpdateTotals(this);
		});
	});
	
	function UpdateTotals(elem) {
		// This will give the tr of the Element Which was changed
		var $container = $(elem).parent().parent();
		var quantity = $container.find('#qty').val();
		var price = $container.find('#rate').val();
		var subtotal = parseInt(quantity) * parseFloat(price);
		$container.find('.amount').val(subtotal.toFixed(2));
		
		CalculateTotal();
	}
	
	function CalculateTotal(){
	  // This will Itearate thru the subtotals and 
		// claculate the grandTotal and Quantity here
		
		var lineTotals = $('.amount');
		var discount = $('#discount').val();
		var grandTotal = 0.0;
		$.each(lineTotals, function(i){
			grandTotal += parseFloat($(lineTotals[i]).val()) ;
		});
		
		var total = parseFloat(grandTotal-discount ).toFixed(2);
		
		$('.balance').val(total);
		$('#ibalance').text(total);       
	   
	}
	
	var data = null;
	
	function itemList() {
		//var id=$(this).val();
		//var dataString = 'id='+ id;
		$.ajax ({
			type: "POST",
			url: "api/api.get-list.php?type=item",
			cache: false,
			async: false,  
			  success:function(data) {
				 result = data; 
			  }
	   });
	   return result;						
	}
	
	
	$("select.itemID").mousedown(function(){
		var $this = $(this);
		if (data) {
			$(this).val(data);
		} else {
			itemList();
			$(this).html(result);
		}
	});
	
	$('form').on('click', '.removeVar', function(){
	  $(this).closest('tr').remove();
	  $('.count').each(function(i){
		$(this).text(i + 1);
	  });
	});
	
	$('#addVar').on('click', function(){
		
	  var varCount = $('#lineitem tr').length;
	  
	  $node = ['<tr>',
		'<td class="count vert-align text-center">'+varCount+'</td>',
		'<td><select name="itemID[]" class="itemID form-control">',
		'<option disabled...