Changing a textbox within a textbox group / jQuery

Question

I have a function that when clicking on a button, it would add fields, each time it adds, adds 3 fields, quantity, total value and subtotal value. My question is how would I change the total value when changing the quantity or value? These fields are n times. Only my question is in the matter of Javascript/jQuery, the database normally receives.

add_field() - Add fields as product name, unit value, quantity and total value

function add_field()
    {
        var f = $("#div_addfield");
        f.append( '<br><hr><label for="nome_produto">Produto - ' + i + '</label> ' +
            '<input id="nome_produto" type="text" name="data[OrdemCompra_itens][' + i + '][nome_produto]" class="form-control" /><br>' +
            '<div class="form-inline">' +
            '<label>Quant:</label>' +
            '   <input type="number" name="data[OrdemCompra_itens][' + i + '][quantidade]" min="1" value="1" ' +
            '       style="width:70px;" class="form-control quantidade" />' +
            '<label>Vlr. Unit.:</label>' +
            '   <input type="text" name="data[OrdemCompra_itens][' + i + '][vlr_unit]"  ' +
            '       style="width:100px;" class="form-control real vlr_unit" />' +
            '<label>Vlr. Total.:</label>' +
            '   <input type="text" name="data[OrdemCompra_itens][' + i + '][vlr_total]" ' +
            '       style="width:120px;" class="form-control vlr_total"  value="0,00" />' +
            '</div><br>');

        i++;
        $(".real").maskMoney({showSymbol:true, symbol:"R$", decimal:",", thousands:"."});
    }

calculates() function responsible for calculating, multiplying value by quantity

function calcula(vlr_unit, quant)
{
    var res;
    res = parseFloat(vlr_unit.replace(".", "").replace(",", ".")) * quant;
    return parseFloat(res).toFixed(2).replace(".", ",");
}

Stretch that supposedly lies the error

$(document).on('change', ".vlr_unit, .quantidade", function () {
        $(".vlr_total").val(calcula($(".vlr_unit").val(), $(".quantidade").val()));
    });

In this last part, it only changes the first added field

---

Last correction, so far all right, just solving the decimal question

$(document).on('change', ".vlr_unit, .quantidade", function () {
        var subtotal = 0, total = 0;

        $(".vlr_unit").each(function() {
            var quantidade = $(this).siblings('.quantidade').val();
            subtotal = calcula(this.value, quantidade);
            total += parseFloat(subtotal.replace(",", "."));
            $("#vlr_total").val(total);
            $(this).siblings(".vlr_subtotal").val(subtotal);
        });


    });

Answer 1

What you need is to iterate all fields by correctly matching their amount and value fields. Here’s a hint:

$(document).on('change', ".vlr_unit, .quantidade", function () {
    var total = 0;

    $(".vlr_unit").each(funtion() {
        var quantidade = $(this).siblings('.quantidade').val();
        total += calcula(this.value, quantidade);
    });

    $(".vlr_total").val(total);
});

What that code on top does is run through all the .vlr_unit and pair with the .quantidade respective. There each one increases the total with the return of the function calcula. At the end of all scrolling, send the result to .vlr_total

Answer 2

$(".vlr_total").val(calcula($(".vlr_unit").val(), $(".quantidade").val())); tells jQuery to take the first element that contains the class .vlr_total and change its value. Already to change the value of all elements containing the class .vlr_total, you must use the function .each() jQuery, which will go through all found elements, not just the first. In its context it would translate to the following:

$(".vlr_total").each(function(){
    //this significa o elemento atual no loop
    $(this).val(calcula($(".vlr_unit").val(), $(".quantidade").val()));
});