Multiplication and summation of dynamic inputs

Question

Note: Developed with Laravel 5.7.
Note 2: This is the view from "New Request".

The form will dynamically receive the products according to their previously registered items. Until then ok!

The user will mark the product and inform the intended quantity. The problem is the following:
Multiply unit value by quantity and sum results!

<div class="form-check">
  @php
  $p = count($produtos);
  $i = 0;
  @endphp
  @foreach ($produtos as $produto)
  @php
  $i++;
  @endphp
  <div class="row ">
    <div class="col-8 produto">
      <input class="form-check-input" type="checkbox" id="produto_id[{{ $i }}]" value="{{ $produto->id }}" name="produto_id[{{ $i }}]" >
      <label class="form-check-label" for="inlineCheckbox1" style="margin-right: 10px">{{ $produto->nome }} - R$ {{ $produto->valor }}</label>
        <div class="valor">
        <input type="hidden" name="val_un[{{ $i }}]" value="{{ $produto->valor }}" id="val_un[{{ $i }}]">
        </div>  
    </div>
    <div class="col fields">
      <input class="form-control" type="text" id="quantidade[{{ $i }}]" name="quantidade[{{ $i }}]" onblur="sum()" placeholder="Quantidade" >  
    </div>  
  </div>
  <hr>
  @endforeach
  <script type="text/javascript">
    function sum()
      {
        let total = 0;
        let valor = 0;
        let valor_un = 0;

        $('.fields input').each(function() {
            valor =  $('.fields input').val();
            valor_un =  $('.valor input').val();
            total_un = valor*valor_un;

            total = ????????????????????????????????????
        });
          $('#total').val(total);
      }
  </script>


</div>
<div class="row">
  <div class="col-8">
    <div class="form-group">
      <label for="total">Valor Total</label>
      <input type="total" class="form-control" id="total" name="total" aria-describedby="emailHelp" value="">
    </div>        
  </div>

Answer 1

whereas the values in value="{{ $produto->valor }}" has the format separating decimal places with dots (ex., 70.02 or 50.00).

How are you making a loop in the inputs instead of valor = $('.fields input').val();, would be valor = $(this).val();, where the $(this) refers to each element traversed by the loop.

To get the product value, you can use the selector:

$('[name="val_un['+i+']"]').val()

The i concatenated in name is every iteration of the loop, which begins with 0:

                                 ↓
$('.fields input').each(function(i) {...

To add up the figures, you do:

total += total_un;

In total value I did a treatment to stay in the form with comma:

function sum(){
   let total = 0;
   let valor = 0;
   let valor_un = 0;
   $('.fields input').each(function(i) {
      valor =  $(this).val();
      // pega o valor correspondente
      valor_un =  $('[name="val_un['+i+']"]').val();
      total_un = valor*valor_un;
   
      total += total_un;
   });
   
   // aqui eu substituo o ponto por vírgula para ficar no formato brasileiro
   // convertendo o número em string com .toFixed(2)
   // para poder fazer o replace
   total = total.toFixed(2).replace('.', ',');
   
   $('#total').val(total);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row ">
    <div class="col-8 produto">
      <input class="form-check-input" type="checkbox" id="produto_id[0]" value="1" name="1" >
      <label class="form-check-label" for="inlineCheckbox1" style="margin-right: 10px">prod1 - R$ 50,13</label>
        <div class="valor">
        <input type="hidden" name="val_un[0]" value="50.13" id="val_un[0]">
        </div>  
    </div>
    <div class="col fields">
      <input class="form-control" type="text" id="quantidade[0]" name="quantidade[0]" onblur="sum()" placeholder="Quantidade" >  
    </div>  
  </div>
  <hr>
 <div class="row ">
    <div class="col-8 produto">
      <input class="form-check-input" type="checkbox" id="produto_id[1]" value="2" name="2" >
      <label class="form-check-label" for="inlineCheckbox1" style="margin-right: 10px">prod2 - R$ 70,02</label>
        <div class="valor">
        <input type="hidden" name="val_un[1]" value="70.02" id="val_un[1]">
        </div>  
    </div>
    <div class="col fields">
      <input class="form-control" type="text" id="quantidade[1]" name="quantidade[1]" onblur="sum()" placeholder="Quantidade" >  
    </div>  
  </div>
  <hr>
total: <input id="total">