Add row to table and calculate rows value - php

Question

<div class="col-xs-12 col-md-10" style="padding:0px 100px 0px 50px; color:blue;">
<form action="#" style="color:blue;" method="POST" >
<div class="well well-sm" >
<table border="collapse; border-spacing:5px;" style="background-color:pink;">
<thead>
<th>Stock ID</th>
<th>Medicine Name</th>
<th>Quantity Unit</th>
<th>Unit Price</th>
<th>Selling Price</th>
<th>Sold Quantity</th>
<th>Total Price</th>
<th><input type="button" value="+" id="add" class="btn btn-primary"></th>
</thead>
<tbody class="detail">
<tr>
<td><input type="text" class="form-control" id="si" name="si"></td>
<td><input type="text" class="form-control" id="mn" name="mn" value="<?php
include_once('classes/class.select.php');
$bill = new select();
$value = $bill ->billing($_POST['si']);
foreach($value as $row){
echo $row["medi_name"];
}
?>"></td>
<td><input type="text" class="form-control" id="qu" name="qu" value="<?php echo $row["quantity_unit"];?>"></td>
<td>
<input type="text" class="form-control" id="up" name="up" value="<?php echo $row["unit_price"]; ?>"></td>
<td>
<input type="text" class="form-control" id="sp" name="sp" value="<?php echo $row["selling_price"];?>"></td>
<td><input type="text" class="form-control" id="t" name="t" ></td>
<td><input type="text" class="form-control" id="ls" name="ls" ></td>
<td><input type="submit" class="btn btn-success" value="Bill" name="savesel"><br></td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
This is my table of billing system of medicine. When we give stock Id, the other columns are automatically fill according to relevant stock Id. I want to add some more rows to this table like this. But when I click on bill button on second row, whole row will be disappeared. I also want to calculate whole total price of the end.
<script>
function addnew(){
var n=($('.detail tr').length-0)+1;
var tr =
'<tr>' +
'<td><input type="text" class="form-control" id="si" name="si"></td>'+
'<td><input type="text" class="form-control" id="mn" name="mn" value="<?php
include_once('classes/class.select.php');
$bill = new select();
$value = $bill ->billing($_POST['si']);
foreach($value as $row){
echo $row["medi_name"];
}
?>"></td>'+
'<td><input type="text" class="form-control" id="qu" name="qu" value=["quantity_unit"]></td>'+
'<td><input type="text" class="form-control" id="up" name="up" value=["unit_price"]></td>'+
'<td><input type="text" class="form-control" id="sp" name="sp" value=["selling_price"]></td>'+
'<td><input type="text" class="form-control" id="t" name="t" ></td>'+
'<td><input type="text" class="form-control" id="ls" name="ls" ></td>'+
'<td><input type="submit" class="btn btn-success" value="Bill" name="savesel"><br></td>'+
'</tr>';
$('.detail').append(tr);
}
$(function(){
$('#add').click(function(){
addnew();
});
});
</script>

Answer 1

$("#cloneTable tfoot #addNew").on("click", function() {
var clonedRow = $('#cloneTable tbody tr:first').clone();
clonedRow.find('input').val('');
$('#cloneTable tbody').append(clonedRow) ;
});