JSFiddle - React, Tailwind, and code Playground

by Ufuk Ozdemir

HTML

<table id="myTable">
    <thead>
        <tr>
            <th>Product</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Product</td>
            <td><input type="text" value="11.00" class="price"></td>
        </tr>
        <tr>
            <td>Product</td>
            <td><input type="text" value="15.00" class="price"></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2"></td>
            <td align="right"><span id="total" class="total">TOTAL</span> </td>
        </tr>
    </tfoot>
</table>

<a href="#" class="ekle">Yeni Ekle</a>

JavaScript

$(document).ready(function() {
	change_update_amounts();
	update_amounts();
});

$(document).on("click", 'a.ekle', function(){
	$("#myTable tbody").append('<tr>' +
		'<td>Product</td>' +
		'<td><input type="text" value="11.00" class="price"></td>' +
	'</tr>');
	change_update_amounts();
	update_amounts();
});

function change_update_amounts() {
	$('.price').change(function() {
		update_amounts();
	});
}
function update_amounts() {
    var sum = 0;
    $('#myTable > tbody  > tr').each(function() {
        var qty = "1";
        var price = $(this).find('.price').val();
        var amount = (qty * price)
        sum += amount;
        $(this).find('.total').text('' + amount);
    });
    //just update the total to sum  
    $('.total').text(sum);
}