Tengo un form:
{!! Form::open(['route' => 'visits.store', 'method' => 'POST', 'class' => 'form']) !!}
<div class="form-group">
<div class="form-row">
<div class="col-md-12 col-sm-12 col-xs-12 pb-4 text-center">
<a href="javascript:void(0);" class="btn btn-success add_button form-control col-md-6 col-xs-12"><i class="fas fa-plus-circle"></i> Agregar otra persona</a>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6 col-sm-6 text-left">
<input type="text" id="first_name[]" name="first_name[]" class="form-control" placeholder="Nombre" required>
</div>
<div class="form-group col-md-6 col-sm-6 text-left">
<input type="text" id="last_name[]" name="last_name[]" class="form-control" placeholder="Apellido" required>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6 col-sm-6 text-left">
<input type="text" id="dni[]" name="dni[]" class="form-control" placeholder="DNI" required>
</div>
<div class="form-group col-md-6 col-sm-6 text-left">
<input type="text" id="phone[]" name="phone[]" class="form-control" placeholder="Teléfono" required>
</div>
</div>
</div>
<div class="form-group text-left">
{{ Form::submit('Guardar', ['class' => 'btn btn-success btn-block']) }}
</div>
{!! Form::close() !!}
Y agrego nuevos campos con Jquery:
<script>
$(document).ready(function () {
var maxField = 20;
var addButton = $('.add_button');
var wrapper = $('.form');
var fieldHTML =
'<div class="trash">'+
'<div class="form-row">' +
'<div class="form-group col-md-6 col-sm-6 text-left">' +
'<input type="text" id="first_name[]" name="first_name[]" class="form-control" placeholder="Nombre" required>' +
'</div>' +
'<div class="form-group col-md-6 col-sm-6 text-left">' +
' <input type="text" id="last_name[]" name="last_name[]" class="form-control" placeholder="Apellido" required>' +
'</div>' +
'</div>' +
'<div class="form-row">' +
'<div class="form-group col-md-6 col-sm-6 text-left">' +
'<input type="text" id="dni[]" name="dni[]" class="form-control" placeholder="DNI" required>' +
'</div>' +
'<div class="form-group col-md-6 col-sm-6 text-left">' +
'<input type="text" id="phone[]" name="phone[]" class="form-control" placeholder="Teléfono" required>' +
'</div>' +
'</div>' +
'<div class="pb-4">' +
'<a href="javascript:void(0);" class="btn btn-sm btn-danger remove_button" title="Remove field">Eliminar<i class="fa fa-close"></i></a>' +
'</div>'
'</div>';
var x = 1;
$(addButton).click(function () {
if (x < maxField) {
x++;
$(wrapper).append(fieldHTML);
}
});
$(wrapper).on('click', '.remove_button', function (e) {
e.preventDefault();
$(this).parents('div .trash').remove();
x--;
});
});
Pero al agregar los nuevos campos se agregan debajo del botón guardar, como hago para que el botón esté debajo siempre.
.wrapper
y ponlo a continuación. Así cuando le hagas elappend
no lo pondrás detrás de este.