Dynamic calculator

[FooKelvin]

Hi Guys,

 

I have a dynamic input field, consists of requirement details.

Each input field have their own sub amount.

 

at the end, the total will sum all the sub amount.

But i have stuck, i do not know how to count the amount, since it's dynamic, how can i get the dynamic id and count it as sub total or grand total?

 

Please refer to my codes above:

 

javascript:

$(document).ready(function () {
    var max_fields = 10; //maximum input boxes allowed
    var wrapper = $(".input_fields_wrap"); //Fields wrapper
    var add_button = $(".add_field_button"); //Add button ID
                        
    var x = 1; //initlal text box count
    $(add_button).click(function (e) { //on add input button click
        e.preventDefault();
        if (max_fields > x) { //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div><table><tr><td style="width:272px">Notice Period - '+x+'</td><td style="width: 14%;"><input name="txt_pe_start[]" type="text" value="" class="input_class start" style="width: 100px; vertical-align: top;"/></td><td style="width: 165px;display: inline;padding: 0 5px 0 5px;">Consists of <input name="consits[]" value="" style="width: 25px;">Day(s)</input></td><td style="width: 165px;display: inline;padding: 0 5px 0 5px;">Short Notice <input name="shortNotice[]" class="sndays" id="sndays_'+x+'" value="" style="width: 25px;">Day(s)</input></td><td style="width: 165px;display: inline;padding: 0 5px 0 5px;">Amount Due<input id="amountdue_'+x+'" name="amountdue[]" style="width: 100px;"></input></td></tr></table></div>'); //add input box
        }
    });// JavaScript source code

html:

<div class="input_fields_wrap">
 <div>
<table>
<tr>
<td style="width:272px">Notice Period - 1</td>
<td style="width: 14%;"><input name="txt_pe_start[]" type="text" value="" class="input_class start" style="width: 100px; vertical-align: top;"/></td>
<td style="width: 165px;display: inline;padding: 0 5px 0 5px;">Consists of <input name="consits[]" style="width: 25px;">Day(s)</input></td>
<td style="width: 165px;display: inline;padding: 0 5px 0 5px;">Short Notice
<input name="shortNotice[]" class="sndays" id="sndays_1" style="width: 25px;">Day(s)</input>
</td>
<td style="width: 165px;display: inline;padding: 0 5px 0 5px;">Amount Due<input id="amountdue_1" name="amountdue[]" style="width: 100px;"></input></td>
</tr>
</table>
</div>
</div>
<button class="add_field_button">Add More Fields</button>
Total:<div></div>