I am stuck with a problem that I have not been able to solve, I am using a form and in the view I have a foreach running through an array. The problem I have is that I need to return the total of the sum between the value-a and value-b and the result in an input sum_total but the value is repeated because I am selecting the class, I tried to place the button that performs the action outside the loop but it has not worked for me. I attach my php and jquery code. I appreciate the help
<?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>';
?>
$(".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);
});