Lo que quiero hacer exactamente es generar unos input dentro de un formulario, y que se generen mediante un select que tendra unos numeros para que el append genere estos input
Aqui dejo el codigo del formulario :
<div class="modal fade" id="Modal-Familia">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title"> </h4>
</div>
<div class="photo" id="familyimg">
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="tpdoc">Numero de Familiares</label>
<div class="selectContainer">
<div class="input-group">
<span class="input-group-addon svg-ico"><i class="icon-num"></i></span>
<select class="form-control">
<option value=" " disabled selected hidden>nro. Acompañantes</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="tpdoc">Tipo de Documento</label>
<div class="selectContainer">
<div class="input-group">
<span class="input-group-addon svg-ico"><i class="icon-dni"></i></span>
<select class="form-control">
<option value=" " disabled selected hidden>Porfavor escoja un Doc</option>
<option value="DNI">DNI</option>
<option value="C.Ext.">C.Ext.</option>
<option value="Pasaporte">Pasaporte</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="doc">Documento</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon svg-ico"><i class="icon-num"></i></span>
<input placeholder="Ingrese documento" class="form-control" type="text" onkeypress="return soloNumeros(event)" maxlength="0">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="doc" >Vencimiento doc</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon svg-ico"><i class="icon-ven"></i></span>
<input placeholder="Ingrese Fecha de Vencimiento del Doc." class="form-control inputfecha" type="text" onkeypress="return soloNumeros(event)">
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="nombre">Nombre</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon svg-ico"><i class="icon-add"></i></span>
<input placeholder="Ingrese Nombres" class="form-control" type="text" onkeypress="return soloLetras(event)">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="phone">Apellidos</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon svg-ico"><i class="icon-pen"></i></span>
<input placeholder="Ingrese Apellidos" class="form-control" type="text" onkeypress="return soloLetras(event)">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Cancelar</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Ok</button>
</div>
</div>
</div>
</div>
Así se ve visualmente :
Este es el Modal donde tengo el formulario y quiero que los inputs extras de pongan debajo del input text "Apellidos"
y estos son los input que quiero agregar cada vez que se genera con el .append()
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="tpdoc">Tipo de Documento</label>
<div class="selectContainer">
<div class="input-group">
<span class="input-group-addon svg-ico"><i class="icon-dni"></i></span>
<select class="form-control">
<option value=" " disabled selected hidden>Porfavor escoja un Doc</option>
<option value="DNI">DNI</option>
<option value="C.Ext.">C.Ext.</option>
<option value="Pasaporte">Pasaporte</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="doc">Documento</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon svg-ico"><i class="icon-num"></i></span>
<input placeholder="Ingrese documento" class="form-control" type="text" onkeypress="return soloNumeros(event)" maxlength="0">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="doc" >Vencimiento doc</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon svg-ico"><i class="icon-ven"></i></span>
<input placeholder="Ingrese Fecha de Vencimiento del Doc." class="form-control inputfecha" type="text" onkeypress="return soloNumeros(event)">
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="nombre">Nombre</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon svg-ico"><i class="icon-add"></i></span>
<input placeholder="Ingrese Nombres" class="form-control" type="text" onkeypress="return soloLetras(event)">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="phone">Apellidos</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon svg-ico"><i class="icon-pen"></i></span>
<input placeholder="Ingrese Apellidos" class="form-control" type="text" onkeypress="return soloLetras(event)">
</div>
</div>
</div>
</div>
</div>
Si por A o B se les puede poner un ID independiente a los nuevos input que se van generando o si de alguna manera pueda tomar su valor o su texto con los nth-child para tomarlos con jquery se los agradecería mucho que me lo confirmaran.
Les agradecería que me den un poco de su conocimiento sobre Jquery para hacer esto, les juro que e intentado viendo foros y documentaciones pero no lo e conseguido, muchas gracias a todos que se tomaron la molestia :)