tengo la siguiente tabla de artículos la cual quiero agregar a otra tabla que funcione como un 'carrito':
<table id="articulo">
<thead class="bg-primary text-white">
<tr>
<th scope="col" width='60px'>Código</th>
<th scope="col">Imagen</th>
<th scope="col">Nombre</th>
<th scope="col">Categoría</th>
<th scope="col">Almacén</th>
<th scope="col">Cantidad</th>
<th scope="col">Precio</th>
<th scope="col">Acciones</th>
</tr>
</thead>
<tbody>
@foreach ($articulos as $articulo)
<tr>
<td>{{ $articulo->codigo }}</td>
@if (isset($articulo->imagen))
<td class="text-center">
<img src="/imagen/{{$articulo->imagen}}" style="height: 50px; width: 50px; border-radius: 20%;">
</td>
@else
<td class="text-center"><img src="/imagen/caja.png"
alt="" width="70" height="70"></td>
@endif
<td>{{ Str::ucfirst($articulo->nombre) }}
</td>
<td>{{ Str::ucfirst($articulo->categoria->nombre) }}</td>
<td>
<select class="form-control" name="almacen" id="almacen">
@foreach ($detallearticulos as $detallearticulo)
@if ($detallearticulo->articulo_id == $articulo->id)
<option value="{{ $detallearticulo->almacen_id }}">{{ $detallearticulo->almacen->nom_alm }}</option>
@endif
@endforeach
</select>
</td>
<td>
<input type="number" class="form-control" min="0" max="100" name="cantidad" id="cantidad" step="1"
oninput="validity.valid||(value='')">
</td>
<td>
<input type="number" class="form-control" min="0" max="10000" name="precio_compra" id="precio_compra"
placeholder="0.00" step="0.25" >
</td>
<td class="text-right" style="width: 220px;">
<input type="hidden" name="articulo_id" id="articulo_id" value="{{$articulo->id}}">
<input type="hidden" name="articulo_nombre" id="articulo_nombre" value="{{$articulo->nombre}}">
<div class="form-group">
<button type="button" id="agregar" class="btn btn-info float-right mt-1"> <i class="fas fa-check"></i>
Agregar</button>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
Lo que necesito es que desde un modal con una tabla los artículos se agreguen a otra tabla de forma dinámica, pero en mi caso el botón de agregar solo funciona para la primera fila, y en el resto de las filas no me realiza ninguna acción, ¿qué puedo hacer? No sé si el error está dentro de la tabla o en la función de agregar.
Mi función de agregar es la siguiente:
function agregar() {
articulo_id = $("#articulo_id").val();
articulo = $("#articulo_nombre").val();
cantidad = $("#cantidad").val();
precio_compra = $("#precio_compra").val();
if (articulo_id != "" && cantidad != "" && cantidad > 0 && precio_compra != "" && articulo_id != null) {
if (precio_compra <= 10000) {
subtotal[cont] = cantidad * precio_compra;
total = total + subtotal[cont];
var fila = '<tr class="selected" id="fila' + cont +
'"><td><button type="button" class="btn btn-danger btn-sm" onclick="eliminar(' + cont +
');"><i class="fas fa-trash-alt"></i></button></td><td><input type="hidden" name="articulo_id[]" value="' +
articulo_id + '">' + articulo +
'</td> <td> <input type="hidden" id="precio_compra[]" name="precio_compra[]" value="' +
precio_compra + '"> <input class="form-control" type="number" id="precio_compra[]" value="' +
precio_compra +
'" disabled> </td> <td> <input type="hidden" name="cantidad[]" value="' + cantidad +
'"> <input class="form-control" type="number" value="' + cantidad +
'" disabled> </td> <td align="right">Bs ' + parseFloat(subtotal[cont]).toFixed(2) + ' </td></tr>';
cont++;
limpiar();
totales();
evaluar();
$('#detalles').append(fila);
}
Si pudieran ayudarme lo agradecería mucho.