Buenas tardes a toda la comunidad, estoy mostrando los datos de un formulario a una tabla al presionar un botón(btnAgregarTabla), los datos se muestran correctamente en la tabla pero adicionalmente necesito calcular el total a pagar de todos los registros de esa tabla y visualizarlos en un input, y ahí está mi problema, no he podido calcular el total a pagar, intenté con un foreach y solo se crea un bucle infinito, espero alguien pueda ayudarme, gracias. Comparto el código de mi javascript y html.
// esta funcion me permite agregar los valores del
// formulario a la lista
function AgregarLista() {
var item = 0;
$('#btnAgregarTabla').click(function () {
item++;
cliente = $('#id_cliente').val();
codigo = $('#id_producto').select2('val');
descripcion = $('#nombre_producto').val();
precio = $('#precio').val();
cantidad = $('#cantidad').val();
subtotal = precio * cantidad;
var fila = '<tr><td>' + item + '</td><td>' + cliente + '</td><td>' + codigo + '</td><td>' + descripcion + '</td><td>' + precio + '</td><td>' + cantidad + '</td><td>' + subtotal + '</td></tr>';
var btn = document.createElement('tr');
btn.innerHTML = fila;
document.getElementById('dtVenta').appendChild(btn);
});
}
// ESTE ES EL CODIGO DEL FORMULARIO Y LA TABLA
<div class="card-body">
<h5>Datos del cliente:</h5>
<div class="form-group d-flex">
<div class="col-md-6 d-flex">
<input type="text" name="dni" id="dni" class="form-control" placeholder="dni cliente">
<input type="button" id="btnBuscarCliente" value="Buscar" class="btn btn-outline-danger">
</div>
<div class="col-md-6">
<input type="hidden" name="id_cliente" id="id_cliente" value="">
<input type="text" name="nombre_cliente" id="nombre_cliente" value="" class="form-control" placeholder="Cliente" disabled>
</div>
</div>
<h5>Datos del producto:</h5>
<div class="form-group d-flex">
<div class="col-md-6 d-flex">
<!-- <input type="text" name="id_producto" id="id_producto" class="form-control" placeholder="codigo producto"> -->
<select name="id_producto" id="id_producto" class="id_producto js-states form-control"></select>
<input type="button" id="btnBuscarProducto" value="Buscar" class="btn btn-outline-danger">
</div>
<div class="col-md-6">
<input type="text" name="nombre_producto" id="nombre_producto" class="form-control" placeholder="Producto" disabled>
</div>
</div>
<div class="form-group row">
<div class="col-md-4">
<input type="text" name="precio" id="precio" class="form-control" placeholder="s/.0.00" disabled>
</div>
<div class="col-md-4">
<input type="number" name="stock" id="stock" class="form-control" placeholder="stock" disabled>
</div>
<div class="col-md-4">
<input type="number" name="cantidad" id="cantidad" value="1" class="form-control" placeholder="cantidad">
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<table id="dtVenta" class="table mt-4" style="width: 100%;">
<thead>
<tr>
<th>Nro.Venta</th>
<th>Cliente</th>
<th>Codigo</th>
<th>Descripcion</th>
<th>Precio</th>
<th>Cantidad</th>
<th>SubTotal</th>
<th>Acciones</th>
<tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer">
<div class="row">
<input type="button" id="btnCancelarVenta" value="Cancelar" class="btn btn-danger">
<input type="button" id="btnGenerarVenta" value="Generar" class="btn btn-success mx-1">
<div class="d-flex ml-auto">
<label for="" class="mx-2 mt-1">Total:</label>
<input type="text" name="total_pagar" id="total_pagar" class="form-control">
</div>
</div>
</div>
</div>