Bootstrap Multistep Form gets destroyed when going back

Question

Applications that I'm using:
HTML, CSS, Javascript, Bootstrap 3

Library / Package I'm using:

https://codepen.io/designify-me/pen/qrJWpG

Hello and good day. I'm trying to modify a Codepen-based Bootstrap Multistep Form as mentioned from the original link above.

My Sample Revision

My problem is that when I tried pressing the Next button and tried a use-case scenario that what if the user tried to Go Back using the Previous button, the current form is getting destroyed. I tried modifying the javascript codes given, but to no avail, everything crumbles

var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches
var participants;

$(".next").click(function(){
    if(animating) return false;
    animating = true;

    current_fs = $(this).parent();
    next_fs = $(this).parent().next();

    //activate next step on progressbar using the index of next_fs
    $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

    //show the next fieldset
    next_fs.show(); 
    //hide the current fieldset with style
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            //as the opacity of current_fs reduces to 0 - stored in "now"
            //1. scale current_fs down to 80%
            scale = 1 - (1 - now) * 0.2;
            //2. bring next_fs from the right(50%)
            left = (now * 50)+"%";
            //3. increase opacity of next_fs to 1 as it moves in
            opacity = 1 - now;
            current_fs.css({
        'transform': 'scale('+scale+')',
        'position': 'absolute'
      });
            next_fs.css({'left': left, 'opacity': opacity});
        }, 
        duration: 800, 
        complete: function(){
            current_fs.hide();
            animating = false;
        }, 
        //this comes from the custom easing plugin
        easing: 'easeInOutBack'
    });

    $("#rname").val($("#name").val())
    $("#remail").val($("#eemail").val())
    $("#rcontact").val($("#contact").val())
    $("#rcompany").val($("#company").val())

    participants = $("input[name='participants[]']")
        .map(function(){return $(this).val();}).get();

    // alert(participants)
    $("#rparticipants").val(participants)
});

$(".previous").click(function(){
    if(animating) return false;
    animating = true;

    current_fs = $(this).parent();
    previous_fs = $(this).parent().prev();

    //de-activate current step on progressbar
    $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");

    //show the previous fieldset
    previous_fs.show(); 
    //hide the current fieldset with style
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            //as the opacity of current_fs reduces to 0 - stored in "now"
            //1. scale previous_fs from 80% to 100%
            scale = 0.8 + (1 - now) * 0.2;
            //2. take current_fs to the right(50%) - from 0%
            left = ((1-now) * 50)+"%";
            //3. increase opacity of previous_fs to 1 as it moves in
            opacity = 1 - now;
            current_fs.css({'left': left});
            previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
        }, 
        duration: 800, 
        complete: function(){
            current_fs.hide();
            // current_fs.css('display', 'none');
            animating = false;
            // current_fs.hide();
        }, 
        //this comes from the custom easing plugin
        easing: 'easeInOutBack'
    });
});

Sample screencaps to replicate the problem mentioned above

After clicking the "Next" button from the 1st screencap above

Then clicking the "Previous" button to edit some details

My attempts to fix the problem
As you can see from the code snippet above, I tried removing the current_fs.hide() code from the "previous" javascript function

complete: function(){
    //current_fs.hide();
    // current_fs.css('display', 'none');
    animating = false;
    // current_fs.hide();
}, 

The 1st step remained, but the 2nd step felt like it's still existing, but it was just hidden so the Add button to add more participants, isn't clickable anymore. And the elements from the 2nd step are still existing -- meaning they overlapped.

May you kindly help me with this dilemma? Where as I click the Previous button, the website doesn't get destroyed? By the way, I'm using Laravel Blade Templating engine.

Here's my whole code: Source Code

Answer 1

The first fieldset is being set position: absolute in the "next" animation, but is not being reset to position: relative after the "previous" animation.

Modify the complete function in the "previous" animation to add this line:

previous_fs.css({'position': 'relative'});

(Note: OP and I figured this out on a chat from a now-deleted answer - that answer was close, but not quite right.)