I calculate between two inputs and result in another

Question

The following script works only for the first block when typing the amount.

Is there any way the function perform the calculation depending on the block in which the quantity is entered.

$(document).ready(function() {
  $('.somente-numero').keyup(function (e) {
     $(this).val($(this).val().replace(/[^0-9\.]/g,''));
     var v1 = Number(document.getElementById("v1").value);
     var v2 = Number(document.getElementById("v2").value);
     var v7 = document.getElementById("v7").value = parseFloat(v1 * v2).toFixed(2);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- bloco 1 -->
<label>preço</label> <input type="text" class="somente-numero" name="produto_solicitado[0][valor_org]" id="v1" size="10" value="100.00"/> 
<label>quantidade</label> <input type="text" class="somente-numero" name="produto_solicitado[0][quantidade]" id="v2" size="10"/> 
<label>total</label> <input type="text" name="produto_solicitado[0][valor_total_prod]" id="v7" size="10" readonly />

<br>

<!-- bloco 2 -->
<label>preço</label> <input type="text" class="somente-numero" name="produto_solicitado[1][valor_org]" id="x1" size="10" value="200.00"/> 
<label>quantidade</label> <input type="text" class="somente-numero" name="produto_solicitado[1][quantidade]" id="x2" size="10"/> 
<label>total</label> <input type="text" name="produto_solicitado[1][valor_total_prod]" id="x7" size="10" readonly />

 <!-- bloco 3 -->

 .................

 <!-- bloco n -->

Answer 1

First I put an equal name to all input and added different classes for each block.

In the function I identify to which class(block) the changed input is intended and so I know that the total of that block should be updated.

$(document).ready(function() {

 $('.somente-numero').keyup(function (e) {
	$(this).val($(this).val().replace(/[^0-9\.]/g,''));
  
  //Obtenho a qual bloco pertence o elemento alterado
  //Pegando a segunda classe do elemento
  var classeBloco = $(this).attr("class").split(' ')[1];
  
  //Obtenho o total daquele bloco
  var $total = $(".total"+classeBloco);

  //Obtenho o preço daquele bloco
  var $preco = $("input."+classeBloco+"[name='preco']").val();
  
  //Obtenho a quantidade daquele bloco
  var $qtd = $("input."+classeBloco+"[name='quantidade']").val();

  $total.val((Number($preco) * Number($qtd)).toFixed(2));
  
 });
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- bloco 1 -->
<div>
  <label>Preço</label> 
  <input type="text" class="somente-numero bloco1" name="preco" size="10" value="100.00"/> 

  <label>quantidade</label>
  <input type="text" class="somente-numero bloco1" name="quantidade" size="10"/> 

  <label>total</label> 
  <input type="text" name="total" class="totalbloco1" size="10" readonly />
</div>

<!-- bloco 2 -->
<div>
  <label>Preço</label> 
  <input type="text" class="somente-numero bloco2" name="preco" size="10" value="200.00"/> 

  <label>quantidade</label> 
  <input type="text" class="somente-numero bloco2" name="quantidade" size="10"/> 

  <label>total</label> 
  <input type="text" name="total" class="totalbloco2" size="10" readonly />
</div>

<!-- bloco 3 -->
<div>
  <label>Preço</label> 
  <input type="text" class="somente-numero bloco3" name="preco" size="10" value="200.00"/> 

  <label>quantidade</label> 
  <input type="text" class="somente-numero bloco3" name="quantidade" size="10"/> 

  <label>total</label> 
  <input type="text" name="total" class="totalbloco3" size="10" readonly />
</div>

Answer 2

A solution without changing anything in your HTML is catching the index of the field typed by name and playing the value on the field total of same index.

The e.target.name.split('[').pop() will return or valor_org] or quantidade], which is already enough to know the index of the element being typed using input[name*=, which selects the field containing one of the strings up in the name.

Obs.: the parseFloat is unnecessary since the values have been converted into Number() formerly.

$(document).ready(function() {
   $('.somente-numero').keyup(function (e) {
      $(this).val($(this).val().replace(/[^0-9\.]/g,''));
      // aqui eu pego o index
      var idx = $('input[name*="'+e.target.name.split('[').pop()+'"]').index(this);
      var v1 = Number($($('input[name*="[valor_org]"]')[idx]).val());
      var v2 = Number($($('input[name*="[quantidade"]')[idx]).val());
      $($('input[name*="[valor_total_prod]"]')[idx]).val((v1 * v2).toFixed(2));
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- bloco 1 -->
<label>preço</label> <input type="text" class="somente-numero" name="produto_solicitado[0][valor_org]" id="v1" size="10" value="100.00"/> 
<label>quantidade</label> <input type="text" class="somente-numero" name="produto_solicitado[0][quantidade]" id="v2" size="10"/> 
<label>total</label> <input type="text" name="produto_solicitado[0][valor_total_prod]" id="v7" size="10" readonly />

<br>

<!-- bloco 2 -->
<label>preço</label> <input type="text" class="somente-numero" name="produto_solicitado[1][valor_org]" id="x1" size="10" value="200.00"/> 
<label>quantidade</label> <input type="text" class="somente-numero" name="produto_solicitado[1][quantidade]" id="x2" size="10"/> 
<label>total</label> <input type="text" name="produto_solicitado[1][valor_total_prod]" id="x7" size="10" readonly />

Answer 3

I got it there with the Brothers this way and I will publish here because I found interesting.

$(document).ready(function () {
    $('.somente-numero').keyup(function (e) {
        var currentVal = $(this).val();
        var replaceD = currentVal.replace(/[^0-9\.]/g, '');
        $(this).val(replaceD);
        var v1 = Number($(this).prev().prev().val());
        var v2 = Number($(this).val());
        var calculatedval = parseFloat(v1 * v2).toFixed(2);
        $(this).next().next().val(calculatedval);
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- bloco 1 -->
<label>preço</label> <input type="text" class="somente-numero" name="produto_solicitado[0][valor_org]" id="v1" size="10" value="100.00"/> 
<label>quantidade</label> <input type="text" class="somente-numero" name="produto_solicitado[0][quantidade]" id="v2" size="10"/> 
<label>total</label> <input type="text" name="produto_solicitado[0][valor_total_prod]" id="v7" size="10" readonly />

<br>

<!-- bloco 2 -->
<label>preço</label> <input type="text" class="somente-numero" name="produto_solicitado[1][valor_org]" id="x1" size="10" value="200.00"/> 
<label>quantidade</label> <input type="text" class="somente-numero" name="produto_solicitado[1][quantidade]" id="x2" size="10"/> 
<label>total</label> <input type="text" name="produto_solicitado[1][valor_total_prod]" id="x7" size="10" readonly />

<br>

<!-- bloco 3 -->
<label>preço</label> <input type="text" class="somente-numero" name="produto_solicitado[1][valor_org]" id="x1" size="10" value="10.00"/> 
<label>quantidade</label> <input type="text" class="somente-numero" name="produto_solicitado[1][quantidade]" id="x2" size="10"/> 
<label>total</label> <input type="text" name="produto_solicitado[1][valor_total_prod]" id="x7" size="10" readonly />