Add quantities from an input created with While in PHP to a DIV

i have a little problem when try do this operation:

This its the crazy code to try do.

$table.="<script>
        function sumacant".$idPedido.$idMedidas."(){
        var CantidadS".$idPedido.$idMedidas." = $('input[data-inputtype="CantidadS".$idPedido.$idMedidas.""]').val();
        var prg = document.getElementById('muestrac').value;
        var nu =  CantidadS".$idPedido.$idMedidas." + prg;
        $('.muestrac').html(nu);
        }
        sumacant".$idPedido.$idMedidas."();
        
     ";  $table.="</script>";

INPUT TO DO :

<input size="3" type="text" data-inputtype="CantidadS'.$idPedido.$idMedidas.'" value="'.$Cant.'"/>

DIV TO SHOW

$table.="<td><div name='muestrac' id='muestrac'>0</div></td>";

ALL CRAZY CODE

<?
$table="<div class='table-responsive' ><table align='center' class='table-responsive-xxl table-bordered border-primary'><thead><tr align='center'><th>Ref</th><th>Imagen</th><th>Peso</th><th>Cantidad</th><th>Total Cantidad</th><th>Precio : <input type='text' size='3' name='GPrecio' id='GPrecio'></th><th>Valor Total</th><th>Observaciones</th></tr></thead>";
    $SQLtraedatos="SELECT Pedido.ProductoURL, Pedido.idProducto, Pedido.Peso, Pedido.Referencia,
  Pedido.FechaRealiza, Pedido.idPedido
FROM Pedido WHERE EstadoPedido=1 and Clientes_idClientes=$id";
     if ($result = mysqli_query($con, $SQLtraedatos)) {
     while ($row = mysqli_fetch_row($result)){ 
     $ProductoURL=$row[0];
     $idProducto=$row[1];
     $Peso=$row[2];
     $Referencia=$row[3];
     $FechaRealiza=$row[4];
     $idPedido=$row[5];
     $Categoria="Vacia";
     $SQLGetMedidas="SELECT Categoria_idCategoria FROM Productos WHERE idProductos=".$idProducto;
     if ($resultGM = mysqli_query($con, $SQLGetMedidas)) {
     while ($rowGM = mysqli_fetch_row($resultGM)){ 
     $Categoria=$rowGM[0];
     }}
     
     if ($Categoria=="Vacia"){ 
         $products=json_decode(file_get_contents('https://decolombiajoyas.com/joyeriaoroplata/wp-json/wc/v2/products/'.$idProducto.'?consumer_key=xxx=xxxx&status=publish'));
         //foreach($products as $product){
             
            $category=$products->categories;
            foreach($category as $categories){
            $nombrecat=$categories->name;
            //var_dump($category);
                if ($nombrecat=='Anillos'){
                    $Categoria=1;
                }
            
         
    }
     }
     
     $word="decolombiajoyas.com";
     if(strpos($ProductoURL, $word) !== false){ 
        $table.="<tr align='center'><td>$Referencia</td><td><img src='$ProductoURL' style='width: 200px; height: 200px;'>";
     }
     else {
        $table.="<tr align='center'><td>$Referencia</td><td><img src='https://pm.decolombiajoyas.com/PorMayor/files/".$ProductoURL."' style='width: 200px; height: 200px;'>";
     }
    $table.="</td><td><input type='hidden' name='Peso".$idPedido."' id='Peso' value='$Peso'>$Peso grs</td><td align='center'>";
        
     
     $SQLtraemedidas="SELECT idMedidas, Nombre FROM Medidas WHERE Categoria=$Categoria ORDER BY Nombre ASC";
     if ($resultM = mysqli_query($con, $SQLtraemedidas)) {
     while ($rowM = mysqli_fetch_row($resultM)){
        
        $NombreM=$rowM[1];
        $idMedidas=$rowM[0];
        $SQLInsertaM="INSERT INTO Medidas_has_Pedido(Medidas_idMedidas, Pedido_idPedido, Cantidad) values (".$idMedidas.",".$idPedido.", 0)";
        mysqli_query($con, $SQLInsertaM);
        $SQLTraeValorQ="SELECT Cantidad FROM Medidas_has_Pedido WHERE Medidas_idMedidas=".$idMedidas." and Pedido_idPedido=".$idPedido;
        $SQLTraeValor = mysqli_query($con, $SQLTraeValorQ);
        while($res=mysqli_fetch_row($SQLTraeValor)){    
        $Cant=$res[0];
        }
            $table.="<script>
        function sumacant".$idPedido.$idMedidas."(){
        var CantidadS".$idPedido.$idMedidas." = $('input[data-inputtype="CantidadS".$idPedido.$idMedidas.""]').val();
        var prg = document.getElementById('muestrac').value;
        var nu =  CantidadS".$idPedido.$idMedidas." + prg;
        $('.muestrac').html(nu);
        }
        sumacant".$idPedido.$idMedidas."();
        
     ";  $table.="</script>";
        $table.='<table><tr><td onchange="changeit('.$idPedido.', '.$idMedidas.', this); sumacant'.$idPedido.$idMedidas.'();">Talla : '.$NombreM.' <input size="3" type="text" data-inputtype="CantidadS'.$idPedido.$idMedidas.'" value="'.$Cant.'"/></td></tr></table>';
    

     }}
     
     if($Categoria!=1) {
         $table.="<script>
        function sumar".$idPedido."(){
        var Peso = $('input[name="Peso".$idPedido.""]').val();
        var Cantidad = $('input[data-inputtype="Cantidad".$idPedido.""]').val();
        //var Cantidad = $('[data-inputtype="Cantidad".$idPedido.""]').val($(this).val());
        var Precio = $('input[id="Precio".$idPedido.""]').val();
        var total = Peso * Cantidad * Precio;
        var n = total.toFixed(2);
        $('.result".$idPedido."').html(n);}</script>
        <br><input size='2' onchange='sumar".$idPedido."();' type='text' data-inputtype='Cantidad".$idPedido."' name='CantidadI[]' id='CantidadI[]' required> <br>";
        
     }
     $table.="<td><div name='muestrac' id='muestrac'>0</div></td>";
     $table.="<td>";
    
     $table.="<input type='text' size='3' name='Precio[]' id='Precio".$idPedido."' data-inputtype='Precio' onchange='sumar".$idPedido."()'></td>";
     $table.="<td><div class='result".$idPedido."' id='result".$idPedido."'></div></td>";
     $table.="</td><td><textarea id='Observaciones[]' name='Observaciones[]' cols='20' rows='5' required></textarea><input type='hidden' id='id' name='idpedido[]' value='".$idPedido."'></td>";
     $table.="</tr>";
     }}
     $table.="</table></div>";
    
      echo $table;
     ?>

Thanks for the time and help.

Answer

Work to separate PHP from the clientside code, you can initialize the values from PHP onto the DOM by setting the values of the inputs (you can also calculate the result of the initial values in PHP and place in your result column).

Then pass control over to js/jquery to do the rest like traversing the DOM by selecting the rows then running over the inputs to update the values on change.

Like the following, sorry not going to rewrite your code, its just too much of a mess.

$(function() {
  // make a function
  function sum_rows() {
    // loop over each class which is .a-row (table rows)
    $('.a-row').each(function() {
      // init a result value
      let result = 0

      // within the row find all inputs which have class .input
      // .. then loop over them
      $(this).find('.inputs input').each(function() {
        // get the value of the input
        result += Number($(this).val())
      })

      // within the row find .result
      // .. then set its value
      $(this).find('td.result').text(result)
    })
  }

  // run function on load
  sum_rows()

  // run function on input
  $('.inputs input').on('input', sum_rows)
})

.inputs {
  width: 60px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Inputs</th>
      <th>Result</th>
    </tr>
  </thead>
  <tbody>
    <tr class="a-row">
      <td class="inputs">
        <input value="1">
        <input value="1">
        <input value="1">
      </td>
      <td class="result"/>
    </tr>
    <tr class="a-row">
      <td class="inputs">
        <input value="1">
        <input value="2">
        <input value="3">
      </td>
      <td class="result"/>
    </tr>
  </tbody>
</table>