Sum of new fields within a foreach

please help me, I need to add the new fields of a foreach since it will modify the current amount that comes from the query, I leave my code in case someone can help me please.

                                <script type="text/javascript">
                                    function operacion(field) {
                                        //Obtengo el formulario
                                        var form = field.parentNode; 
                                        //Obtengo el valor del campo 1
                                        var numero1 = form.cantidad.value; 
                                        //Obtengo el valor del campo 2          
                                        var numero2 = form.precio.value;
                                        //Hago el calculo y se lo asigno al campo de texto correspondiente          
                                        form.total.value = ( numero1 * numero2 );                                                                              
                                        console.log(form.total.value);
                                    }    
                                </script> 

 <?php
     $totalProducto=0;
     foreach ($sql_Producto as $itemListarProductoCarrito):
     $precio = $itemListarProductoCarrito['costo_promedio_producto'];
  ?>
   <form>
    <table  class="table table-bordered">                                                                   
    <tr>
    <a href="eliminardelcarro.php?id=<?php echo $c["product_id"]; ?>" class="fa fa-fw fa-minus-circle" data-toggle="tooltip" title="Eliminar"></a>
    </tr>                                                                                                                          
    <tr><br>
    <!--aqui le aumento para la cantidad para poder modificar si el ususario lo desea-->
    <label>Cantidad</label>
    <select name="cantidad" style="width:100px;" class="form-control" onchange="operacion(this)" >
        <option value="<?php echo $c["q"]; ?>"><?php echo $c["q"]; ?></option>
        <option value=""></option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>                                                                        
    </tr> 
    <tr><br>
    <td><label>Precio Unitario</label></td>
    <td><input align="right" style="width:100px;" class="form-control" type="text" name="precio" value="<?php echo $precio;/*recibo mi precio*/ ?>"  onchange="operacion(this)"  readonly></td>
    </tr>
    <tr>
        <td><label>Total</label></td>
        <td><input align="right" style="width:100px;" class="form-control" type="text" name="total" value="<?php echo '$' . $total = $c["q"] * $precio; /*aqui multiplico la cantidad enviada * por el precio*/?>"readonly></td>
        <?php $totalProducto += $total;/*sumo todos los valores totales*/ ?>
    </tr>
</table>

     </form>
     <?php
    endforeach;
   ?>

until everything works fine since I add all the values within my foreach Now I need to add the values but now these with a SELECT to change the amount since the amount $ c ["q"] sends me another form but I can not with the new amount since it would be containing the name="total "I think I'd do something to him but I can not think of it as

the second case