Puedo añadir y eliminar los inputs perfectamente, cada uno con su 'name[]' para posteriormente guardarlos en la base de datos. Pero al añadir los inputs, estos no se muestran correctamente.
Cuando inspecciono los divs, veo que el primer div que se crea en la función envuelve a todo los inputs, incluyendo el principal que crea a los demás inputs. No estoy seguro cual sea el problema, ya que he intentado cambiando las clases de los inputs (class=row) a los que se van agregando, pero el resultado es peor.
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div><div class="col-third"><div class="input-group input-group-icon"><input type="text" name="nombre_pax_pref[]" placeholder="Nombre Pax" required/><div class="input-icon"><i class="fas fa-calendar-alt"></i></div></div></div><div class="col-third"><select style="width: 29%; padding-right: 10px;float: left;" name="select" id="selectLg" class="form-control-lg form-control" onchange="this.nextElementSibling.value=this.value"><option disabled selected>-ID-</option><option>RUT: </option><option>PAS: </option><option>DNI: </option></select><input style="width: 71%" type="text" placeholder="Nº" name="rut_pax[]"/></div><button type="button" class="btn btn-danger btn-lg remove_field">-</button></div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
.row {
zoom: 1;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
@media (min-width: 992px)
.col-lg-12 {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
.col-lg-12 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-third {
padding-right: 10px;
float: left;
width: 33.33333333%;
.input-group-icon {
position: relative;
}
.input-group {
margin-bottom: 1em;
zoom: 1;
}
.input-group {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: stretch;
align-items: stretch;
width: 100%;
}
.input-group-icon input {
padding-left: 4.4em;
}
.input-group-icon .input-icon {
position: absolute;
top: 0;
left: 0;
width: 3.4em;
height: 3.4em;
line-height: 3.4em;
text-align: center;
pointer-events: none;
}
input, textarea {
border: none;
}
input, input[type="radio"] + label, input[type="checkbox"] + label:before, select option, select {
width: 100%;
padding: 1em;
line-height: 1.4;
background-color: #f9f9f9;
border: 1px solid #e5e5e5;
border-radius: 3px;
-webkit-transition: 0.35s ease-in-out;
-moz-transition: 0.35s ease-in-out;
-o-transition: 0.35s ease-in-out;
transition: 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-12">
<div class="input_fields_wrap">
<div class="col-third">
<div class="input-group input-group-icon">
<input type="text" name="nombre_pax_pref[]" placeholder="Nombre Pax" required/>
<div class="input-icon"><i class="fas fa-calendar-alt"></i></div>
</div>
</div>
<div class="col-third">
<select name="select" id="selectLg" class="form-control-lg form-control" onchange="this.nextElementSibling.value=this.value">
<option disabled selected>-ID-</option>
<option>RUT: </option>
<option>PAS: </option>
<option>DNI: </option>
</select>
<input type="text" placeholder="Nº" name="rut_pax[]"/>
</div>
<div class="col-third">
<button type="button" class="btn btn-success btn-lg add_field_button">+</button>
</div>
</div>
</div>