I am having problems with my jquery animations, after submitting the form when performing the submit action, I want to chain the animation back to step 1, but I can't do it, and when I want to go to step 2 the bar appears again progress progress .. I am not finding my fault, I leave my code pen, with the styles and the form to see if they can lend a hand
function nextBackFormulario(boton,primerFormulario,segundoFormulario,valorPrimario,valorSecundario){
boton.on("click", () => {
primerFormulario.animate({marginLeft: valorPrimario});
segundoFormulario.animate({marginLeft: valorSecundario});
})
}
function finalizarForm(boton,primerFormulario,segundoFormulario,tercerFormulario,cuartoFormulario,quintoFormulario,valorPrimario,valorSecundario,valorWidth,){
boton.on("click", () => {
primerFormulario.animate({marginLeft: valorPrimario});
segundoFormulario.animate({marginLeft: valorSecundario});
tercerFormulario.animate({marginLeft: valorSecundario});
cuartoFormulario.animate({marginLeft: valorSecundario});
quintoFormulario.animate({marginLeft: valorSecundario});
$('.progreso').css({width: valorWidth})
$('.circulo:not(:first)').toggleClass('activo')
$('.fas:not(:first)').toggleClass('activado')
$('#formSimulador').trigger("reset");
})
}
//primer paso
nextBackFormulario($("#siguiente1"), $("#bienvenida"),$("#datosPersonales"),'-105%','0%')
nextBackFormulario($("#anterior0"), $("#bienvenida"),$("#datosPersonales"),'0%','105%')
//segundo paso
nextBackFormulario($("#siguiente2"), $("#datosPersonales"),$("#datosLaborales"),'-105%','0%')
nextBackFormulario($("#anterior1"), $("#datosPersonales"),$("#datosLaborales"),'0%','105%')
//tercer paso
nextBackFormulario($("#siguiente3"), $("#datosLaborales"),$("#datosPrestamo"),'-106%','0%')
nextBackFormulario($("#anterior2"), $("#datosLaborales"),$("#datosPrestamo"),'0%','106%')
//ultimo paso
nextBackFormulario($(".botonCalc"), $("#datosPrestamo"),$("#finalizacionSimulador"),'-105%','0%')
finalizarForm($("#botonEnviar"), $("#bienvenida"),$("#datosPersonales"),$("#datosLaborales"),$("#datosPrestamo"),$("#finalizacionSimulador"),'0%','0%','0%')
Use data-al_paso in button with id "siguente", don't suffix id with a number. Add suffix on the class "circulo". So you can get the "circulo" on the click of the button "singuiente" thanks to the data-al_paso.
// example circulo hmtl
<div class="circulo-1"><i class="fas fa-money-check-alt"></i></div>
<div class="circulo-2 "><i class="fas fa-hand-holding-usd"></i></div>
etc...
// example siguente
<button data-paso="1" data-al_paso="2" class="siguiente" type="button">Siguiente</button>
$('.siguente').on('click', function(e) {
var index = $(this).data('al_paso');
$('.circulo-' + index).addClass('activo');
});