Question

Saludos cordiales, estoy trabado con un problema que no he podido resolver, estoy utilizando un formulario y en la vista tengo un foreach recorriendo un array. El problema que tengo es que necesito retornar el total de la suma entre el valor-a y valor-b y el resultando en un input suma_total pero el valor se repite debido a que estoy seleccionando es la clase, he intentado colocar el boton que realiza la accion por fuera del bucle pero no me ha funcionado. adjunto mi codigo php y jquery. Agradezco la ayuda

<?php

//Get work order
$workerItem = "work_id";
$workerValue = $_GET["workId"];

$worker = WorkordersController::ctlWorkShow($workerItem,$workerValue);

//Decode json string
$workersList = json_decode($worker["work_workers"],true);

foreach ($workersList as $key => $value) {

    $item = "user_id";
    $value_2 = $value["id"];

    $response = UsersController::ctlUserShow($item, $value_2);

    echo '<div class="row" style="padding:5px 15px">
            <div class="col-xs-3" style="padding-right: 0px" >
              <div class="input-group">

                <input type="text" style="font-size: 12px" class="form-control newWorkerName"    value="'.($key+1).'" readonly >
            </div>
           </div>
           <div class="col-xs-3" >
               <div class="input-group">
                   <input type="text" style="font-size: 12px" class="form-control valor-a"  value="" >
               </div>
           </div>

           <div class="col-xs-3" >
               <div class="input-group">
                   <input type="text" style="font-size: 12px" class="form-control valor-b"  value="" >
               </div>
           </div>

           <div class="col-xs-3" style="padding-left: 0px">
               <div class="input-group">
                   <input type="text" style="font-size: 12px" class="form-control suma_total" value="" readonly>
               </div>
            </div>
        </div>';
}

echo '<button class="btn btn-success btnCalcular" style="font-size: 11px">Calcular</button>';
?>

codigo jquery

$(".btnCalcular").click(function () {

  event.preventDefault();

  var valorA = $(".valor-a").val();

  var valorB = $(".valor-b").val();

  var total = $(".suma_total");

  var suma = Number(valorA)+Number(valorB);

  total.val(suma);

});

Answer 1

Lo que tienes que hacer es que se calcule por cada línea, por ejemplo así:

$('.row').each(function(index, row) {
   var valorA = $(".valor-a", row).val();

  var valorB = $(".valor-b", row).val();

  var total = $(".suma_total", row);

  var suma = Number(valorA)+Number(valorB);

  total.val(suma);
});