jQuery live calc multirow input - php

Question

This is my code:
<?php
for($i=1;$i<10;$i++){
echo '<input type="text" class="count value'. $i .'">';
echo '<input type="text" class="count '. $i .'value">';
echo '<input type="text" disabled="disabled" id="result'. $i .'"><p>';
}
echo '<input type="text" disabled="disabled" id="total"><p>';
?>
and jQuery:
$(document).ready(function(){
$(".count").keyup(function(){
for (var i = 0; i < 10; i++) {
var val1 = +$(".value"+ i).val();
var val2 = +$("."+ i +"value").val();
$("#result" + i).val(val1*val2);
}
});
});
$(document).ready(function(){
$(".count").keyup(function(){
for (var i = 0; i < 10; i++) {
var vala = 0;
vala += +$("#result"+ i).val();
}
$("#total").val(vala);
});
});
First part of code works great.
Return multiplication two inputs to id=result$i.
I have a problem with last one id=total.
It should return sum of all result X inputs
but now only return the last multiplication.
Do You have any idea what's wrong?

Answer 1

You can simplify your code by grouping the related input elements together in a containing div, using DOM traversal to retrieve the needed values, and joining the two for loops together. Try this:
<div class="group">
<input type="text" class="count valueA" />
<input type="text" class="count valueB" />
<input type="text" class="result" disabled="disabled" />
</div>
<!-- repeat the above as needed. Note that the incremental id is no longer needed -->
<p>
<input type="text" disabled="disabled" id="total" />
</p>
$(document).ready(function(){
$(".count").keyup(function() {
var total = 0;
$('.group').each(function() {
var $group = $(this);
var valA = +$group.find('.valueA').val() || 0;
var valB = +$group.find('.valueB').val() || 0;
var result = valA + valB;
total += result;
$group.find('.result').val(result);
});
$("#total").val(total);
});
});
Example fiddle

Answer 2

That is because you have defined variable vala to 0 in for loop. which should be outside for loop:
$(".count").keyup(function(){
var vala= 0;
for (var i = 0; i < 10; i++) {
vala += $("#result"+ i).val();
}
$("#total").val(vala);
});