Veo dos problemas
El primero es que los id
del html están pensados para identificar un único elemento del dom, como acá estás haciendo un @foreach
, por cada <tr>
que dibujas en la tabla repites los identificadores
Te aconsejo que cambies los id
por class
ej
<input type="number" class="form-control" name="precio_compra" id="precio_compra">
por
<input type="number" class="form-control js-precio-compra" name="precio_compra">
Por eso cuando haces precio_compra = $("#precio_compra").val();
en la función de agregar
siempre toma el del primer <tr>
de la tabla
Lo siguiente es que al clickear el botón "Agregar", limites la búsqueda de los valores a solo la fila en la que está el botón que presionaste, que impidas que jquery busque en todo el dom pues...
Cambia el id
por clase en el botón de
<button type="button" id="agregar" class="btn btn-info float-right mt-1">Agregar</button>
a
<button type="button" class="btn btn-info float-right mt-1 js-agregar">Agregar</button>
Y luego en tu javascript escucha cuando se clickee la clase .js-agregar
y haz que se llame dentro la función agregar
$(".js-agregar").on("click", function(){
fila = $(this).closest("tr");
agregar(fila);
});
En el on click que acabamos de hacer estamos obteniendo el elemento clickeado con $(this)
, osea el botón, y partiendo del botón buscamos la fila a la que pertenece con .closest()
Como ya tenemos la fila, podemos obtener ahora los valores de esa fila específica usando .find()
, ocuparías modificar la función agregar
para recibir el parametro fila
function agregar(fila) {
articulo_id = fila.find(".js-articulo-id").val();
articulo = fila.find(".js-articulo-nombre").val();
cantidad = fila.find(".js-cantidad").val();
precio_compra = fila.find(".js-precio-compra").val();
Closest! busca elementos padre del elemento seleccionado, y find! busca elementos hijos
Espero te sea de ayuda mi explicación!