<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> </title>
<link href="css/bootstrap-4.0.0.css" rel="stylesheet" type="text/css">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<script>
$(document).ready(function() {
var id = 1;
$("#butsend").click(function() {
var newid = id++;
$("#table1").append('<tr valign="top" id="'+newid+'">\n\
<td width="100px" >' + newid + '</td>\n\
<td width="100px" class="patid'+newid+'">' + $("#patid").val() + '</td>\n\
<td width="100px" class="test_code'+newid+'">' + $("#test_code").val() + '</td>\n\
<td width="100px" class="test_name'+newid+'">' + $("#test_name").val() + '</td>\n\
<td width="100px" id="generalprice" class="generalprice'+newid+'">' + $("#generalprice").val() + '</td>\n\
<td width="100px" id=quantity class="quantity'+newid+'">' + $("#quantity").val() + '</td>\n\
<td width="100px" id="qntytolprices" class="totalprices'+newid+'">' + $("#totalprices").val() + '</td>\n\
<td width="100px"><a href="javascript:void(0);" class="remCF">Remove</a></td>\n\ </tr>');
});
$("#table1").on('click', '.remCF', function() {
$(this).parent().parent().remove();
$('#table1 tbody tr').each(function(id){
$($(this).find('td')[0]).html(id++);
});
});
$("#butsave").click(function() {
var lastRowId = $('#table1 tr:last').attr("id");
var test_code = new Array();
var test_name = new Array();
var generalprice = new Array();
var quantity = new Array();
var totalprices = new Array();
var patid = new Array();
for ( var i = 1; i <= lastRowId; i++) {
patid.push($("#"+i+" .patid"+i).html());
test_code.push($("#"+i+" .test_code"+i).html());
test_name.push($("#"+i+" .test_name"+i).html());
generalprice.push($("#"+i+" .generalprice"+i).html());
quantity.push($("#"+i+" .quantity"+i).html());
totalprices.push($("#"+i+" .totalprices"+i).html());
totalprice.push($("#"+i+" .totalprice"+i).html());
}
});
});
</script>
<script>
$(".qtol2,.qtol1").keyup(function() {
$('.qtol3').val($('.qtol1').val() * $('.qtol2').val());
});
</script>
</head>
<body>
<form>
<input name="patid" type="text" id="patid" placeholder="patid" value="">
<div class="container" id="multiple">
<input name="test_code" type="text" id="test_code" placeholder="code" value="">
<input name="test_name" type="text" id="test_name" placeholder="Item Name" value="">
<input class="qtol1" name="generalprice" type="text" id="generalprice" placeholder="general price">
<input class="qtol2" name="quantity" type="text" id="quantity" value="1" onClick="calc()" placeholder="quantity">
<input class="qtol3" name="totalprices" type="text" id="totalprices" placeholder="total prices">
<input name="send" type="button" id="butsend" class="add-row" value="Add Row">
</div>
<input name="save" type="button" class="btn btn-primary" value="Save to database" id="butsave">
</div>
<table id="table1" name="table1" class="table table-bordered">
<tbody>
<thead>
<tr>
<th>Serial no.</th>
<th>ID</th>
<th>Test code</th>
<th>Test name</th>
<th>General price</th>
<th>Quantity</th>
<th>Total prices</th>
<th>Action</th>
</tr>
</thead>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Total:</td>
<td ><input id="subtotal" type="text"></td>
<td>
</td>
</tr>
</tfoot>
</table>
</form>
</div>
</body>
</html>