Operations with multiple input js

Question

I am developing a system and in a certain part it presents the following structure, image below

Also follows the code

What I want to do is when the user type in the "Arms" field and in the "Weight" field he performs an account and returns the value in the "Total Prod" field."

Put this in each line, staying as image below:

I tried to do it that way, code below:

$(document).ready(function(){

  $(document).on('change', '.peso', function() {
    var v = $(this).val();
    var c = $(".bracas").val();

    $(".total_prod").val(v*c);
  });
});

However, Dassa forms all fields "Total Prod." is filled in.

Could you give me a hand with that?

Answer 1

follows a suggestion without depending on jQuery.:

// O objetivo do objeto Linha é criar um scope para os elementos da pagina.
var Linha = function (linha) {
  this.linha = linha;
  // os seletores abaixo irão buscar os elementos DOM apenas dentro da tr "linha"
  this.situacao = this.linha.querySelector("name='situacao'");
  this.matricula = this.linha.querySelector("name=^'matricula'");
  this.bracas = this.linha.querySelector("name=^'bracas'");
  this.peso = this.linha.querySelector("name=^'peso'");
  this.total_prod = this.linha.querySelector("name=^'total_prod'");
  this.total_pago = this.linha.querySelector("name=^'total_pago'");

  //realizando o bind do método "onChange" para os elementos do "DOM".
  //o bind(this) serve para que o "this" no evento seja o objeto Linha e não o elemento DOM em si.
  this.bracas.addEventListener("input", this.onChange.bind(this));
  this.peso.addEventListener("input", this.onChange.bind(this));
}

//definindo o evento onChange no prototype da Linha, para evitar que a mesma seja declarada a cada vez que o objeto Linha seja instanciado.
Linha.prototype.onChange = function () {
  var bracas = parseInt(this.bracas.value) || 0;
  var peso = parseInt(this.peso.value) || 0;
  this.total_prod.value = bracas * peso;
}

//percorrendo todas as linhas da tabela e criando um escopo para cada uma delas.
var linhas = [].forEach.map(document.querySelectorAll(".table tbody tr"), function (linha) {
  return new Linha(linha);
});

now with jQuery...

$(document).on('change', '.bracas, .peso', function() {
  // buscando a linha mais próxima para utiliza-la como escopo.
  var l = $(this).parent('tr');
  var v = $(".peso", l).val();
  var c = $(".bracas", l).val();
  $(".total_prod", l).val(v*c);
});

Answer 2

Barter

$(".total_prod").val(v*c);

For

$(this).parents("tr").find(".total_prod").val(v*c);

Answer 3

Search for "Total Prod" according to the this

$(document).ready(function(){

  $(document).on('change', '.peso', function() {
    var v = $(this).val();
    var c = $(".bracas").val();

    $(this).closest('tr').find(".total_prod").val(v*c);
  });
});

(I didn’t test it but most likely)