Skip to main content
2 de 3
se eliminaron 122 caracteres en el cuerpo

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!