baris_total.html

<table>
	<thead>
		<tr>
			<td>Harga</td>
			<td>Qty</td>
			<td>Total</td>
		</tr>
	</thead>
	<tbody class="roww">
		<tr class="baris">
			<td><input type="text" name="harga[]" class="harga" placeholder="Harga" /></td>
			<td><input type="text" name="qty[]" class="qty" placeholder="Qty" /></td>
			<td><input type="text" name="total[]" class="total" placeholder="Total" readonly="" /></td>
			<td> <button class="minus">-</button> <button class="plus">+</button> </td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<td></td>
			<td>GRAND TOTAL :</td>
			<td colspan="2"> <input id="grand_total"/> </td>
		</tr>
	</tbody>

</table>

<script type="text/javascript">

	var baris_tr = $('.roww').html();
	function append(){
		$('.baris').each(function(index, el) { 
			var baris = $(this);
			baris.find('.minus').on('click', function(event) {
				event.preventDefault(); 
				$(this).parent().parent().remove(); 
			});
			baris.find('.plus').on('click', function(event) {
				event.preventDefault(); 
				$('.roww').append(baris_tr);
				append(); // panggil diri sendiri untuk pengulangan
			});

			baris.find('.qty').change(function(){
				var harga = parseInt(baris.find('.harga').val());
				var qty = parseInt(baris.find('.qty').val());
				var total = harga *qty;
				baris.find('.total').val(total);
				var tot = 0;
				$('.total').each(function(index, el) {
					tot += parseInt($(this).val());
				});
				$('#grand_total').val(parseInt(tot));
			});
		});
	}
	append(); /// panggil untuk pertama kali
 
</script>