Jquery Repeter by Elib0

Jquery Repeter v2 by: ELIBO. Ver código en Github

Características:

Repite o elimina fragmentos HTML, Útil para formularios que requieren array inputs.
Tiene la posibilidad de usar animaciones CSS3 al eliminar item.(Recomendado: Animate.css)
Si se utiliza Bootstrap Validator activa los inputs al agregar item y actualiza las validaciones.
Puede repetir template en otro contenedor (jquery-tmpl).
Puede repetir en dos contenedores a la vez, con posibilidad de usar template alternativos para la insercion.(Espejo)

div.dinamic

Básico

Item Inicial

Codigo

Javascript:
							$('.dinamic').repeter();

Template:
							<script class="template" type="text/x-jQuery-tmpl">
							  <li>Item ${numElement}<button type="button" class="btn btn-danger btn-xs remove">Eliminar</button></li>
							</script>

div.dinamic-2

Inserción en otro elemento

Item Inicial

Javascript:
							$('.dinamic-2').repeter({
							  elements:{
							    appendTo:'#otro',
							    animation:'animated bounceOutRight'
							  }
							});

Template:
							<script class="template" type="text/x-jQuery-tmpl">
							  <li>Item ${numElement}<button type="button" class="btn btn-danger btn-xs remove">Eliminar</button></li>
							</script>

div.dinamic-3

Inserción con espejo y mismo template

Item Inicial

Javascript:
							$('.dinamic-3').repeter({
							  elements:{
							    mirror:{selector:'#espejo'}
							  }
							});

Template:
							<script class="template" type="text/x-jQuery-tmpl">
							  <li>Item ${numElement}<button type="button" class="btn btn-danger btn-xs remove">Eliminar</button></li>
							</script>

div.dinamic-4

Inserción con espejo y otro template

Item Inicial

Javascript:
							$('.dinamic-3').repeter({ elements:{ mirror:{selector:'#espejo', tmplSelector:'.template-mirror'} } });

Templates:
							<script class="template" type="text/x-jQuery-tmpl">
							  <li>Item ${numElement}<button type="button" class="btn btn-danger btn-xs remove">Eliminar</button></li>
							</script>
							<script class="template-mirror" type="text/x-jQuery-tmpl">
							  <li>Esto es otro template diferente ${numElement}</li>
							</script>

div.dinamic-5

Inserción de contenido dinámico y uso de múltiples templates.

Ejemplo: Insertar un nombre y generar número random.

Ingrese nombre:

Javascript:
								$('.dinamic-5').repeter({
								  elements:{
								    animation:'animated zoomOutLeft',
								    mirror:{
								      selector:'#espejo-dinamic-5',
								      animation: 'animated bounceOutRight',
								      tmplSelector:'.template-mirror'
								    }
								  },
								  tmplData:function(){
								    var nombre=$('input[name="nombre"]',this).val();
								    return {rnd:Math.random()*5,nombre:nombre||'Fulano de Tal'};
								  }
								});

Templates:
								<script class="template" type="text/x-jQuery-tmpl">
								  <li>Usuario ${numElement}: ${nombre} <button type="button" class="btn btn-danger btn-xs remove">Eliminar</button></li>
								</script>
								<script class="template-mirror" type="text/x-jQuery-tmpl">
								  <li>El usuario ${nombre} obtuvo el número ${rnd}.</li>
								</script>

Muy pronto la documentación completa...

Requisitos: