here is the running JSFiddle What you need to do is to get all your inputs with jquery selector then iterate through them to get their values. once you got the values its easy to calculate row total and table total values
<div style="width:90%;margin:auto;">
<form method="post">
<div id="itemRows">
product: <input type="text" name="add_product" />
amount:<input type="text" id="value1" name="add_qty" size="4" onchange="output();"/>
price:<input type="text" id="value2" name="add_price" onchange="output();"/>
<select type="text" name="add_tax" onchange="output();">
<option value="21">21%</option>
<option value="6">6%</option>
<option value="0">0%</option>
</select>
<p id="result"> </p>
<input onClick="addRow(this.form); output()" type="button" value="add new line" />
</div>
<p><input type="submit" name="ok" value="Save Changes"></p>
</form>
</div>
and js:
function output(){
var tableTotal = 0;
qtyArr = new Array();
priceArr = new Array();
taxArr = new Array();
$( "input[name^='qty']" ).each(function( index ) {
qtyArr.push(parseInt($( this ).val()));
});
$( "input[name^='price']" ).each(function( index ) {
priceArr.push(parseInt($( this ).val()));
});
$( "select[name^='tax']" ).each(function( index ) {
taxArr.push(parseInt($( this ).val()));
});
for(i = 0; i< qtyArr.length; i++)
{
console.log(qtyArr[i] +"*"+ priceArr[i] + "*" + taxArr[i])
rowTotal = qtyArr[i] * priceArr[i] * (1-taxArr[i] / 100);
document.getElementById('result' + (i+1)).innerHTML = rowTotal;
tableTotal+=rowTotal;
}
document.getElementById('result').innerHTML = "tableTotal: " + tableTotal;
}
function removeRow(rnum) {
jQuery('#rowNum'+rnum).remove();
output();
}