Dynamic Input Total Calc

by LyndseyB

HTML

<input type="button" id="addButton" value=" Add Row " />

<table id="TextBoxesGroup">
   <tr>
       <td colspan="4">Header row</td>
    </tr>
   <tr>
       <td><input placeholder="Item Code" name="data[0][0]" class="itmcode" /></td>
        <td><input name="data[0][1]" placeholder="Item Name" /></td>
        <td><input name="data[0][2]" placeholder="Item Description" /></td>
        <td><input data-field="price" name="data[0][3]" placeholder="Item Amount" class="itmamnt" /></td>
        <td><input data-field="quantity" name="data[0][4]" placeholder="Item Quantity" class="itmqty" /></td>
        <td><input data-field="total" name="data[0][5]" placeholder="Item Total" readonly="readonly" /></td>
    </tr>
</table>

<h2>Total Cost: &pound;<span id="total">0.00</span></h2>

JavaScript

$(document).ready(function(){
    
    var table = $("#TextBoxesGroup");
    var row = table.find("tr").eq(1);
    var count = 0;
    
    $("#addButton").click(function(e){
        if (table.find("tr").length >= 10){
            alert("Maximum of 10 rows");
            return;
        }
        var newRow = row.clone();
        var regex = new RegExp("data\[[0-9]+\]", "g");
        newRow.html(newRow.html().replace(regex, "data[" + (++count) + "]"));
        table.append(newRow);
    });
    
    $(document).on('keyup', "*[data-field='quantity'],*[data-field='price']", function(e){
        var thisRow = $(this).parents("tr:first");
        var rowTotalField = thisRow.find("*[data-field='total']");
        var price = parseFloat(thisRow.find("*[data-field='price']").val());
        var quantity = parseInt(thisRow.find("*[data-field='quantity']").val());
        rowTotalField.val("\u00A3" + (!isNaN(price) && !isNaN(quantity) ?
                       price*quantity : 0).toFixed(2));
        var total = 0;
        table.find("*[data-field='total']").each(function(){
            var t = parseFloat($(this).val().replace("£", ""));
            total += !isNaN(t) ? t : 0;
        });
        $("#total").text(total.toFixed(2));
    });
    
});