Tengo un formulario en html el cual agrega dinámicamente lineas, en cada linea esta el nombre del producto, cantidad, precio unitario y total.
Lo ideal seria que se algo asi (Tomates 10 15 150) en donde tengo el producto que es tomate, con 10 unidades, el precio unitario es de 15 y el precio total es de 150, si agrego una nueva línea pues lo ideal es que haga lo mismo, sin embargo no lo hace, solo hace la operación de la primera linea
Las funciones para agregar las nuevas lineas es esta
<script>
function AgregarMas() {
$("<div>").load("InputDinamico.php", function() {
$("#productos").append($(this).html());
});
}
function BorrarRegistro() {
$('div.lista-producto').each(function(index, item){
jQuery(':checkbox', this).each(function () {
if ($(this).is(':checked')) {
$(item).remove();
}
});
});
}
</script>
Este es el formulario
<div id="row" class="text-center">
<div class="col-sm-1"> Nro.</div>
<div class="col-sm-5 center-block" > Descripción</div>
<div class="col-sm-2" >Cantidad</div>
<div class="col-sm-2 center-block" >Costo Unitario</div>
<div class="col-sm-2 center-block" >Costo Total</div>
</div>
<div class="clearfix"></div>
<div id="productos">
<?php require_once("InputDinamico.php") ?>
</div>
Y esta es funcion de la multiplicación y la linea que agrego, este es el InputDinamico.php
<script>
function multi(valor){
m1 = document.getElementById("txt_campo_1").value;
m2 = document.getElementById("txt_campo_2").value;
r = m1*m2;
document.getElementById("spTotal1").value = r;
}
<div class="lista-producto">
<ul class="list-group">
<li class="row list-group-item">
<div class="col-sm-1 center-block">
<input class="center-block" type="checkbox" name="item_index[]" /></div>
<div class="col-sm-5">
<input class="form-control center-block" type="text" name="pro_nombre[]" /></div>
<div class="col-sm-2">
<input class="form-control center-block" type="text" name="pro_precio[]" value=0 id="txt_campo_1" onchange="multi(this.value);" /></div>
<div class="col-sm-2">
<input class="form-control center-block" type="text" name="pro_cantidad" value=0 id="txt_campo_2" onchange="multi(this.value);"/></div>
<div class="col-sm-2 center-block">
<input class="form-control center-block" type="text" name="pro_total" id="spTotal1" style="width:110px;"/></div>
</li>
</ul>
</div>
Como se podria solucionar eso? Gracias por su ayuda