JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script>
function isNumberKey(evt) {
  var charCode = (evt.which) ? evt.which : event.keyCode
  if (charCode > 31 && (charCode != 46 && (charCode < 48 || charCode > 57)))
    return false;
  return true;
}
</script>
<table class="table table-bordered table-hover" id="tab_add">
  <tbody>
    <tr>
      <td colspan="2"><b>Customer Name</b></td>
      <td colspan="1">
        <select name="Per_Name[]" class="form-control">
          <option value="">Select Customer</option>
          <option value="2000001">John Doe</option>
          <option value="2000002">Jane Doe</option>
          <option value="2000003">Tom Harry</option>
          <option value="2000004">Steve Jobs</option>
        </select>
      </td>
    </tr>
    <tr id='addr0'>
      <td><b>1</b></td>
      <td><b>Select Item</b></td>
      <td colspan="1">
        <select name="Sub_Name[]" class="form-control">
          <option value="">Select Item</option>
          <option value="1000001">Item A</option>
          <option value="1000002">Item B</option>
          <option value="1000003">Item C</option>
          <option value="1000004">Item D</option>
        </select>
      </td>
      <td><input type="text" name="itemPrice0" id="itemPrice0" data-index="0" class="itemPrice form-control" placeholder="Unit Price"></td>
      <td><input type="number" name="Qty0" id="Qty0" data-index="0" class="Qty form-control" onkeypress="if(!isNumberKey(event)){return false;}" placeholder="Quantity"></td>
      <td><input type="text" name="linePrice0" id="linePrice0"...

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

JavaScript

$(function(){

  var i = 1,
    j = 1;
  $("#add_row").click(function() {
    if (i < 10) {
      $('#addr' + i).html("<td>" + (i + 1) + "</td><td><b>Select Item</b></td><td colspan='1'><select name='Sub_Name" + i + "' class='form-control'><option value=''>Select Item</option><option value='1000001'>Item A</option><option value='1000002'>Item B</option><option value='1000003'>Item C</option><option value='1000004'>Item D</option></select></td><td><input type='text' name='itemPrice" + i + "' id='itemPrice" + j + "' data-index='"+j+"' class='itemPrice form-control' placeholder='Unit Price'></td><td><input type='number' name='Qty" + i + "' id='Qty" + j + "' data-index='"+j+"' class='Qty form-control' onkeypress='return isNumberKey(event)' placeholder='Quantity'></td><td><input type='text' name='linePrice" + i + "' id='linePrice" + j + "' data-index='"+j+"' class='linePrice form-control' onkeypress='return isNumberKey(event)' placeholder='Line Price' readonly></td>");

      $('#tab_add').append('<tr id="addr' + (i + 1) + '"></tr>');
      i++;
      j++;
      $('#delete_row').show();
    } else {
      alert("You can only add upto a maximum of 10 items")
      $('#add_row').hide();
    }
  });
  
  $("button").click(function() {
    addrow('tb')
  });


	$("#tab_add").on("keyup", ".Qty", function(e){
  
  	var qtyPur = parseFloat(this.value);

  	if (!isNaN(this.value) && this.value.length != 0) {
      $("#linePrice"+$(this).data('index')).val(parseFloat($("#itemPrice"+$(this).data('index')).val()) * qtyPur);
    }

		calculateSum()
  
  });

	function calculateSum()
  {
    var sum = 0;
  $(".linePrice").each(function() {

    if (!isNaN(this.value) && this.value.length != 0) {
      sum += parseFloat(this.value);
    }

  });
  $("#priceTotal").val(sum.toFixed(2));
  }

});