Por otro lado, si bien los nombres de los campos tienen que ser arrays, si los armás como los tenés, vas a tener un problema. Cada vez que aparece un campo array (inventario[][nombre]
, inventario[][cantidad]
) se le suma 1 ala la clave, con lo cual terminás con un array del estilo:
$('.clonar').click(function() {
// Clona el .input-group
var $clone = $('#formulario .input-group').last().clone();
// Borra los valores de los inputs clonados
$clone.find(':input').valeach(''function () {
if ($(this).is('select')) {
this.selectedIndex = 0;
} else {
this.value = '';
}
});
// Agrega lo clonado al final del #formulario
$clone.appendTo('#formulario');
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="formulario">
<label for="Material">Material</label>
<button type="button" class="clonar btn btn-secondary btn-sm">+</button>
<div class="input-group">
<select name="nombres[]" class="form-control col-md-6">
<option value="1">
Material 1
</option>
<option value="2">
Material 2
</option>
</select>
<input type="number" class="form-control col-md-6 @error('Cantidad') is-invalid @enderror" name="cantidades[]" placeholder="Cantidad a solicitar" required>
</div>
</div>