ayuda a poner el script para crear juego de campos dinámicos


17 de Marzo del 2020

Tengo este codigo el cual crea campos dinamicos adicionales al formulario.. todo funciona biense agregan los campos Viajes y el primer juego de campos operarios (se agregan y se eliminan con su respectivo boton sin problema en el primer bloque) pero al adicionar campos Viajes en los siguientes no me deja agregar campos operarios apartir de alli, el script que hace la magia que esta alli (en los javascript) pues es el mismo que el primer juego de campos   pero no he podido ponerlo en el lugar para que se creen el segundo juego de campo (var fieldHTML2)..aca dejo el script

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var maxField1 = 10; //Input fields increment limitation
var addButton1 = $('.add_button1'); //Add button selector
var wrapper1 = $('.field_wrapper1'); //Input field wrapper
var fieldHTML1 = '<div><hr><label>Hora Inicio: </label><input name="hora1[]" type="text" class="hora1" autocomplete="off" id="hora1" size="5" required/><label> Hora Final: </label><input name="hora2[]" type="text" class="hora2" autocomplete="off" id="hora2" size="5" required/><label> Novedad: </label><input name="novedad[]" type="text" class="campos2" id="novedad" value="" size="20"/> <a href="javascript:void(0);" class="remove_button1" title="Remove field"><img src="https://cdn.pixabay.com/photo/2014/04/03/00/42/delete-309164_960_720.png" width="20" height="20"/></a><br><div class="field_wrapper2"><div><label>Operario: </label><input name="operario[]" type="text" class="campos2" id="operario" value="" size="15"/></label><a href="javascript:void(0);" class="add_button1" title="Agregar Operario"><img src="https://farm8.staticflickr.com/7091/7159403535_379db07e1a_o.png" width="21" height="21" /></a></div><br>';
var x1 = 1; //Initial field counter is 1
$(addButton1).click(function(){ //Once add button is clicked
if(x1 < maxField1){ //Check maximum number of input fields
x1++; //Increment field counter
$(wrapper1).append(fieldHTML1); // Add field html
}
});
$(wrapper1).on('click', '.remove_button1', function(e){ //Once remove button is clicked
e.preventDefault();
$(this).parent('div').remove(); //Remove field html
x1--; //Decrement field counter
});
});
</script>
<div><a href="javascript:void(0);" class="add_button1" title="Agregar Viaje" ><img src="https://farm8.staticflickr.com/7091/7159403535_379db07e1a_o.png" width="30" height="30"/></a></div>
<td width="54" height="24">Viajes:</td>
<td width="714"><div class="field_wrapper1">
<div>
<label>Hora Inicio: </label>
<input name="hora1[]" type="text" class="hora1" autocomplete="off" id="hora1" size="5" required/>
<label>Hora Final:
<input name="hora2[]" type="text" class="hora2" autocomplete="off" id="hora2" size="5" required/>
</label>
Novedad:
<input name="novedad[]" type="text" class="campos2" id="novedad" value="" size="20"/>
<br>
</div>

<script type="text/javascript">
$(document).ready(function(){
var maxField2 = 10; //Input fields increment limitation
var addButton2 = $('.add_button2'); //Add button selector
var wrapper2 = $('.field_wrapper2'); //Input field wrapper
var fieldHTML2 = '<div id="destino2"><label>Operario: </label><input name="operario[]" type="text" class="campos2" id="operario" value="" size="15" <label> <a href="javascript:void(0);" class="remove_button2" title="Borrar Operario"><img src="https://cdn.pixabay.com/photo/2014/04/03/00/42/delete-309164_960_720.png" width="20" height="20"/></a></div>';
var x2 = 1; //Initial field counter is 1
$(addButton2).click(function(){ //Once add button is clicked
if(x2 < maxField2){ //Check maximum number of input fields
x2++; //Increment field counter
$(wrapper2).append(fieldHTML2); // Add field html
}
});
$(wrapper2).on('click', '.remove_button2', function(e){ //Once remove button is clicked
e.preventDefault();
$(this).parent('div').remove(); //Remove field html
x2--; //Decrement field counter
});
});
</script>
<div class="field_wrapper2">
<div>
<label>Operario: </label><input name="operario[]" type="text" class="campos2" id="operario" value="" size="15" />
<label>
<a href="javascript:void(0);" class="add_button2" title="Agregar Viaje" ><img src="https://farm8.staticflickr.com/7091/7159403535_379db07e1a_o.png" width="20" height="20"/></a>
<tr>
<td height="24" colspan="2"><div><a href="javascript:void(0);" class="add_button2" title="Agregar Viaje" ></a></div>
</div><div></div>

</td>