Add columns of a table to a total field and repeat the sum to each new row

Question

I have a table with some columns for typing values and I need to add the total of these values in a final column.

The sum is easy to do, however the table and dynamic and are generated multiple rows, and when I try to re-add the columns in the new row, I am also adding the result of the previous rows.

I believe I should have to set my javascript call as default for the new calculation line but not knowing how to do take the example

Note that in the first column the total sums correctly, in the second it sums right tbm, but adds the value together with the result of the previous field.

The PHP code looks like this:

<?php for ($cont = 1; $cont <= $quantidadeRegistros; $cont++): ?> 
<tr>
    <?php for ($i = 1; $i < 5; $i++): ?>
        <td><input class='form-control calcular' type='text' name='quantidade[]' onkeyup='calcular(<?php echo $cont ?>)' </td>
    <?php endfor; ?>
    <td>
        <input class='form-control' type='text' name='total[]' id='result-<?php echo $cont ?>' readonly />
    </td>
</tr>
<?php endfor; ?>

And javascript like this:

$(document).ready(function () {
 function calcular(id) {
        var campo = 'result-'.concat(id);
        var soma = $('.calcular').get().reduce(function (soma, el) {
            return (parseInt(el.value, 10) || 0) + soma;
        }, 0);
        document.getElementById(campo).value = soma;
    }
});

I think if I define that at each line the sum should be started from scratch I solve the problem, but I did not identify how to do it

Answer 1

The trick here not to add up with those of the previous line is on this line $(this).parents('tr').find('input.calcular') in which we will "ask the parent element, tr (line), what are the values of the children with the class calcular, that is, only the values of inputs children of this line (tr) with the class calculate is that are accounted for for that calculation.

Changing your structure a little bit, but I think the result you want is this:

$('.calcular').on('keyup change', function() {
	var total = 0;
	$(this).parents('tr').find('input.calcular').each(function(){
		var val = parseInt($(this).val());
		if(!isNaN(val)) {
			total += parseInt(val);
		}
	});
	$(this).parents('tr').find('input.total').val(total);
});

input {
 width: 70px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
	<tr>
		<td><input class='form-control calcular' type='number' name='quantidade[]'</td>
		<td><input class='form-control calcular' type='number' name='quantidade[]'</td>
		<td><input class='form-control calcular' type='number' name='quantidade[]'</td>
		<td><input class='form-control calcular' type='number' name='quantidade[]'</td>
		<td><input class='form-control total' type='text' name='total[]' id='result-1' readonly /></td>
	</tr>
	 
	<tr>
		<td><input class='form-control calcular' type='number' name='quantidade[]'</td>
		<td><input class='form-control calcular' type='number' name='quantidade[]'</td>
		<td><input class='form-control calcular' type='number' name='quantidade[]'</td>
		<td><input class='form-control calcular' type='number' name='quantidade[]'</td>
		<td><input class='form-control total' type='text' name='total[]' id='result-2' readonly /></td>
	</tr>
</table>

I reduced the inputs to make them all viewable, also changed them to type=number