JSFiddle - React, Tailwind, and code Playground

HTML

<a href="" value="" class="add_row_count" id="hide">Add another row</a>
<table id='count' class="table table-bordered count" cellspacing="0" width="100%" >
					<thead>
					<tr>
					<th style = "text-align: center; width:180px"></th>
					<th style = "text-align: center;">BEG</th>
					<th style = "text-align: center;"> DEL</th>
					<th style = "text-align: center;"> RET</th>
					<th style = "text-align: center;"> EXC</th>
					<th style = "text-align: center;"> P-OUT</th>
					<th style = "text-align: center;"> SALES</th>
					<th style = "text-align: center;"> END</th>
					<th style = "text-align: center;"> ACTUAL COUNT</th>
					<th style = "text-align: center;"> VARIANCE</th>					
					</tr>
					</thead>
					<tbody>
					<tr>
					<td style = "text-align: center;"><input type="text" name="categ_name[]" id="categ_name" value="" placeholder="Item Category" required></td>
					<td style = "text-align: center;"><input type="number" name="beg_count[]" id="beg_count" value="" placeholder="BEG Count" required></td>
					<td style = "text-align: center;"><input type="number" name="del_count[]" id="del_count" value="" placeholder="DEL Count" required></td>
					<td style = "text-align: center;"><input type="number" name="ret_count[]" id="ret_count" value="" placeholder="RET Count" required></td>
					<td style = "text-align: center;"><input type="number" name="exc_count[]" id="exc_count" value="" placeholder="EXC Count" required></td>
					<td style = "text-align: center;"><input type="number" name="pout_count[]" id="pout_count" value="" placeholder="P-Out Count" required></td>
					<td style = "text-align: center;"><input type="number" name="sales_count[]" id="sales_count" value="" placeholder="SALES Count" required></td>
					<td style = "text-align: center;"><input type="number" name="end_count[]" id="end_count" value="" placeholder="END Count" required></td>
					<td style = "text-align: center;"><input type="number" name="actual_count[]" id="actual_count"...

JavaScript

$('.add_row_count').on('click',function(){
    event.preventDefault();
    var newRow = $('<tr><td style = "text-align: center;"><input type="text" name="categ_name[]" id="categ_name" value="" placeholder="Item Category" required></td> ' +
	'<td style = "text-align: center;"><input type="number" name="beg_count[]" id="beg_count" value="" placeholder="BEG Count" required></td>' +
	'<td style = "text-align: center;"><input type="number" name="del_count[]" id="del_count" value="" placeholder="DEL Count" required></td>' +
	'<td style = "text-align: center;"><input type="number" name="ret_count[]" id="ret_count" value="" placeholder="RET Count" required></td>' +
	'<td style = "text-align: center;"><input type="number" name="exc_count[]" id="exc_count" value="" placeholder="EXC Count" required></td>' +
	'<td style = "text-align: center;"><input type="number" name="pout_count[]" id="pout_count" value="" placeholder="P-Out Count" required></td>' +
	'<td style = "text-align: center;"><input type="number" name="sales_count[]" id="sales_count" value="" placeholder="SALES Count" required></td>' +
	'<td style = "text-align: center;"><input type="number" name="end_count[]" id="end_count" value="" placeholder="END Count" required></td>' + 
	'<td style = "text-align: center;"><input type="number" name="actual_count[]" id="actual_count" value="" placeholder="Actual Count" required></td>' +
	'<td style = "text-align: center;"><input type="number" name="variance[]" id="variance" value="" placeholder="Variance" readonly></td>' +
	'<td style="border-top: 1px solid white; border-bottom: 1px solid white; border-right: 1px solid white"><button class="del" id="delete_row_count" type="button" onclick="deleterow_count();">Delete row</button></td></tr>');
    $('table.count').append(newRow);
});
      $('#categ_name,#beg_count, #del_count, #ret_count,#exc_count, #pout_count, #sales_count,#end_count, #actual_count, #variance').keyup(function (){

      var end = $('#end_count').val();
     ...