JSFiddle - React, Tailwind, and code Playground

HTML

<table id="mytable" width='100%' align='center' cellspacing='1' cellpadding='2'>
  <thead align="center">
    <tr>
      <th>S. #</th>
      <th>Qty</th>
      <th>Rate</th>
      <th>Amount</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody id="content"></tbody>
  <tbody>
    <tr>
      <!--sno-->
      <td style="text-align:center;">
        <input style="text-align:center;" type="text" id="serial" size="3" maxlength="3" disabled required="required" />
      </td>
      <!--qty-->
      <td style="text-align:center;">
        <input style="text-align:center;" type="text" name="qty[]" id="qty" size="5" maxlength="5"  required="required" />
      </td>
      <!--rate-->
      <td style="text-align:right;">
        <input style="text-align:right;" type="text" name="rate[]" id="rate" size="5" maxlength="5" />
      </td>
      <!--Amount-->
      <td>
        <input style="text-align:right;" type="text" id="amount" name="amount[]" size="5" maxlength="5" />
      </td>
      <!--Action-->
      <td>
        <input type="button" name="addnew" id="addnew" value="Add" />
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
     
      <td align='Center'>Total</td>
      <td></td> 
      <td></td>
      <td>
        <input style="text-align:right;" type="text" name="total" id="total" size="5" maxlength="5" value="" />
      </td>
      <td></td>
    </tr>
  </tfoot>
</table>

CSS

table {
   font-size: 12px;
   font-weight: bold;
   font-family: Verdana, Geneva, sans-serif;
 }
 
 #mytable td {
   border: 1px solid #CCC;
   font-size: 14px;
 }
 
 #mytable thead {
   border: 1px solid #6C3;
   background-color: #CCC;
   color: black;
   line-height: 30px;
   height: 30px;
   font-size: 14px;
 }
 
 #mytable input[type="text"] {
   outline: none;
   border: 1px solid #69C;
   color: green;
   font-size: 14px;
   font-weight: bold;
   height: 20px;
   padding: 5px;
 }
 
 tfoot {
   background-color: #999;
   color: black;
   height: 30px;
 }

JavaScript

function addRow(qty,rate,amount) {
	if (amount > 0) {
	$('#content').append('<tr><td style="text-align:center;"><input style="text-align:center;" type="text" name="sno[]" size="3" maxlength="3" readonly required="required" /></td><td style="text-align:center;"><input style="text-align:center;" type="text" name="qty[]" size="5" maxlength="5" value="'+qty+'" required="required" /></td><td style="text-align:right;"><input style="text-align:right;" type="text" name="rate[]" size="5" maxlength="5" value="'+rate+'" /></td><td><input style="text-align:right;" type="text" name="amount[]" size="5" maxlength="5" value="'+amount+'" /></td><td><input type="button" class="remove" value="Remove" /></td></tr>');
	}
}

function update(){
	var i = 1;
  var total = 0;
	$('#content').find('input[name="sno[]"]').each(function(){
  	$(this).val(i);
    i++;
  });
  $('#content').find('input[name="amount[]"]').each(function(){
  	total += parseInt($(this).val());
  });
  $('#total').val(total);
}

$('#addnew').click(function(){
  var code = $('#qty').val();
  var party = $('#rate').val();
  var amount = $('#amount').val();
  addRow(code,party,amount);
  update();
  $('#qty').val('');
  $('#rate').val('');
  $('#amount').val('');
  $('.remove').on('click', function(){
    $(this).closest('tr').remove();
    update();
  });
});