JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<input name="r" class="rate" type="text" maxlength="255" size="5" value=""/>
<input name="p" class="pack" type="text" maxlength="255" size="5" value=""/>
<input name="b" class="bag" type="text" maxlength="255" size="5" value=""/>
<input name="w" class="weight" type="text" maxlength="255" size="5" value=""/>
<span class="amount"></span>
</div>
<div>
<input name="r" class="rate" type="text" maxlength="255" size="5" value=""/>
<input name="p" class="pack" type="text" maxlength="255" size="5" value=""/>
<input name="b" class="bag" type="text" maxlength="255" size="5" value=""/>
<input name="w" class="weight" type="text" maxlength="255" size="5" value=""/>
<span class="amount"></span>
</div>
<div>
<input name="r" class="rate" type="text" maxlength="255" size="5" value=""/>
<input name="p" class="pack" type="text" maxlength="255" size="5" value=""/>
<input name="b" class="bag" type="text" maxlength="255" size="5" value=""/>
<input name="w" class="weight" type="text" maxlength="255" size="5" value=""/>
<span class="amount"></span>
</div>
<div class="total_amount">total</div>
JavaScript
//any time the amount changes
$(document).ready(function() {
$('input[name=r],input[name=p]').change(function(e) {
var total = 0;
var $row = $(this).parent();
var rate = $row.find('input[name=r]').val();
var pack = $row.find('input[name=p]').val();
total = parseFloat(rate * pack)*100;
//update the row total
$row.find('.amount').text(total);
var total_amount = 0;
$('.amount').each(function() {
//Get the value
var am= $(this).text();
console.log(am);
//if it's a number add it to the total
if (IsNumeric(am)) {
total_amount += parseFloat(am, 10);
}
});
$('.total_amount').text(total_amount);
});
});
//isNumeric function Stolen from:
//http://stackoverflow.com/questions/18082/validate-numbers-in-javascript-isnumeric
function IsNumeric(input) {
return (input - 0) == input && input.length > 0;
}