I am having an issue in regards to animation, on form submit the animation are activated. But upon modal dismiss, it should reset all state, but upon dismissing and retrying from step-1 the animation on step-2 gets re-activated for some reason. script.js

    // Resets Forgot Password on modal dismiss
    $('#login-reg-fgtpass').on('hidden.bs.modal', function() {
        $('form#f-email-form')[0].reset();
        $('form#f-code-form')[0].reset();
        $('form#f-pass-form')[0].reset();
        $('#fgtpass-step-1').show();
        $('#fgtpass-step-2').hide();
        $('#fgtpass-step-3').hide();
        $('#fgtpass-step-1').removeClass('animated fadeOutLeft');
        $('#fgtpass-step-2').removeClass('animated fadeOutLeft fadeInRight');
        $('#fgtpass-step-3').removeClass('animated fadeOutLeft fadeInRight');
    });

    // Forgot Password Step 1
    $('form#f-email-form').submit(function(e) {
        e.preventDefault();

        var result = $('form#f-email-form').serialize();
        console.log(result);

        $('div#f-pass-step-1-loader').fadeIn(350);

        $.ajax({
            type: 'POST',
            url: 'assets/php/forgotPass.php',
            data: result,
            dataType: 'json',
            success: function(data) {
                console.log(data); // Debugging Purpose

                if (data == 'email-empty') {
                    toastr.warning('Empty email field');
                }
                else if (data == 'email-fail') {
                    toastr.error('Wrong email format');
                }
                else if (data == 'email-none') {
                    toastr.error('Email not registered');
                }
                else if (data == 'email-pass') {
                    toastr.success('Check your email');

                    $('#fgtpass-step-1').addClass('animated fadeOutLeft').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
                        $('#fgtpass-step-1').hide();
                        $('#fgtpass-step-2').show();
                        $('#fgtpass-step-2').addClass('animated fadeInRight');
                        $('#fgtpass-step-1').removeClass('animated fadeOutLeft');
                    });
                }

                $('div#f-pass-step-1-loader').fadeOut(350);
            }
        });
    });

    // Forgot Password Step 2 (Resend)
    $('button#f-code-btn-re').on('click', function() {
        var result = $('form#f-email-form').serialize();

        $('div#f-pass-step-2-loader').fadeIn(350);

        $.ajax({
            type: 'POST',
            url: 'assets/php/forgotPass.php',
            data: result,
            dataType: 'json',
            success: function(data) {
                //console.log(data); // Debugging Purpose

                if (data == 'email-pass') {
                    toastr.success('Check your email');
                }
                else {
                    //Dismiss modal
                }

                $('div#f-pass-step-2-loader').fadeOut(350);
            }
        });
    });

    // Forgot Password Step 2
    $('form#f-code-form').submit(function(e) {
        e.preventDefault();

        var result = $('form#f-code-form, form#f-email-form').serialize();

        console.log(result);

        $.ajax({
            type: 'POST',
            url: 'assets/php/forgotPass.php',
            data: result,
            dataType: 'json',
            success: function(data) {
                console.log(data); // Debugging Purpose

                if (data == 'code-min-max') {
                    toastr.error('Verification code has to be 4 characeters');
                }
                else if (data == 'code-fail') {
                    toastr.error('Wrong verification code');
                }
                else if (data == 'code-pass') {
                    toastr.success('Verification code matched');

                    $('#fgtpass-step-2').addClass('animated fadeOutLeft').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
                        $('#fgtpass-step-2').hide();
                        $('#fgtpass-step-3').show();

                        $('#fgtpass-step-3').addClass('animated fadeInRight').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
                            $('#fgtpass-step-3').removeClass('animated fadeInRight');
                        });

                        $('#fgtpass-step-2').removeClass('animated fadeOutLeft fadeInRight');
                    });
                }
            }
        });
    });

html

<!DOCTYPE html>
<!-- Modal -->
<div id="login-reg-fgtpass" class="modal fade animated pulse" tabindex="-1" role="dialog">
    <div class="modal-dialog cascading-modal" role="document">
        <!-- Content -->
        <div class="modal-content">
            <!-- Modal Cascading Tabs -->
            <div class="modal-c-tabs">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs tabs-3 blue darken-1" role="tablist">
                    <li class="nav-item">
                        <a id="tab-login" class="nav-link active" data-toggle="tab" href="#panel-login" role="tab"><i class="fa fa-sign-in mr-1"></i> Login</a>
                    </li>
                    <li class="nav-item">
                        <a id="tab-reg" class="nav-link" data-toggle="tab" href="#panel-reg" role="tab"><i class="fa fa-user-plus mr-1"></i> Register</a>
                    </li>
                    <li class="nav-item">
                        <a id="tab-fgtpass" class="nav-link" data-toggle="tab" href="#panel-fgtpass" role="tab"><i class="fa fa-question-circle mr-1"></i> Forgot Password</a>
                    </li>
                </ul>
            </div>

            <!-- Tab panels -->
            <div class="tab-content">
                <!--Panel Login-->
                <div id="panel-login" class="tab-pane fade in show active" role="tabpanel">
                    <form id="loginForm" method="post">
                        <!-- Body -->
                        <div class="modal-body mb-1">
                            <div class="md-form form-sm">
                                <i class="fa fa-envelope prefix"></i>
                                <input id="l-email" name="l-email" type="text" class="form-control">
                                <label for="l-email">Email</label>
                            </div>

                            <div class="md-form form-sm">
                                <i class="fa fa-lock prefix"></i>
                                <input id="l-pass" name="l-pass" type="password" length="32" class="form-control">
                                <label for="l-pass" required>Password</label>
                            </div>
                            <div class="text-center mt-2">
                                <button id="l-btn" type="submit" class="btn btn-secondary">Log in</button>
                            </div>
                        </div>
                        <!-- Footer -->
                        <div class="modal-footer display-footer">
                            <div class="options text-center text-md-left mt-1">
                                <p>
                                    <a id="a-fgtpass" class="blue-text">Forgot Password?</a><br/>
                                    Don't have an account?
                                    <a id="a-reg" class="blue-text" data-toggle="tab" href="#panel-reg">Register</a>
                                </p>
                            </div>

                            <button class="btn btn-outline-danger btn-rounded waves-effect ml-auto" type="button" data-dismiss="modal">Close <i class="fa fa-times-circle ml-1"></i></button>
                        </div>
                    </form>
                </div>
                <!-- /.Panel Login -->

                <!-- Panel Register -->
                <div id="panel-reg" class="tab-pane fade" role="tabpanel">
                    <form id="regForm" method="post">
                        <!-- Body -->
                        <div class="modal-body">
                            <div class="md-form form-sm">
                                <i class="fa fa-envelope prefix"></i>
                                <input id="r-email" name="r-email" type="text" maxlength="255" class="form-control">
                                <label for="r-email">Email</label>
                            </div>

                            <div class="md-form form-sm">
                                <i class="fa fa-user prefix"></i>
                                <input id="r-name" name="r-name" type="text" class="form-control">
                                <label for="r-name">Name</label>
                            </div>

                            <div class="md-form form-sm">
                                <i class="fa fa-lock prefix"></i>
                                <input id="r-pass" name="r-pass" type="password" length="32" class="form-control" >
                                <label for="r-pass">Password</label>
                            </div>

                            <div class="text-center form-sm mt-2">
                                <button id="r-btn" type="submit" class="btn teal">Register</button>
                            </div>

                            <div class="text-center red-text">
                                *<small>Organisation do not require an account to hire freelancers.</small>
                            </div>
                        </div>

                        <!-- Footer -->
                        <div class="modal-footer">
                            <div class="options text-md-left">
                                <p class="pt-1">
                                    Already have an account?
                                    <a id="a-login" class="blue-text" data-toggle="tab" href="#panel-login">Log In</a>
                                </p>
                            </div>

                            <button class="btn btn-outline-danger btn-rounded waves-effect ml-auto" type="button" data-dismiss="modal">Close <i class="fa fa-times-circle ml-1"></i></button>
                        </div>
                    </form>
                </div>
                <!-- /.Panel Register -->

                <!-- Panel Forgot Password -->
                <div id="panel-fgtpass" class="tab-pane fade" role="tabpanel">
                    <!-- Body -->
                    <!-- fgtpass-step-1 -->
                    <div id="fgtpass-step-1">
                        <form id="f-email-form" type="post">
                            <div class="modal-body">
                                <div class="md-form form-sm">
                                    <i class="fa fa-envelope prefix"></i>
                                    <input id="f-email" name="f-email" type="text" class="form-control">
                                    <label for="f-email" required>Email</label>
                                </div>

                                <div id="f-pass-step-1-loader" class="progress primary-color" style="display: none;">
                                    <div class="indeterminate"></div>
                                </div>

                                <div class="text-center form-sm mt-2">
                                    <button id="f-email-btn" type="submit" class="btn btn-secondary">Next <i class="fa fa-angle-double-right ml-1"></i></button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!-- /.fgtpass-step-1 -->

                    <!-- fgtpass-step-2 -->
                    <div id="fgtpass-step-2">
                        <form id="f-code-form" type="post">
                            <div class="modal-body">
                                <div class="md-form form-sm">
                                    <i class="fa fa-unlock-alt prefix"></i>
                                    <input id="f-code" name="f-code" type="password" class="form-control">
                                    <label for="f-code" required>Verification Code</label>
                                </div>

                                <div id="f-pass-step-2-loader" class="progress primary-color" style="display: none;">
                                    <div class="indeterminate"></div>
                                </div>

                                <div class="text-center form-sm mt-2">
                                    <div class="row">
                                        <div class="col-lg-4 offset-lg-4">
                                            <button id="f-code-btn" type="submit" class="btn teal">Verify <i class="fa fa-angle-double-right ml-1"></i></button>
                                        </div>

                                        <div class="col-lg-4">
                                            <button id="f-code-btn-re" type="reset" class="btn btn-danger">Resend <i class="fa fa-repeat ml-1"></i></button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!-- /.fgtpass-step-2 -->

                    <!-- fgtpass-step-3 -->
                    <div id="fgtpass-step-3">
                        <form id="f-pass-form" type="post">
                            <div class="modal-body">
                                <div class="md-form form-sm">
                                    <i class="fa fa-key prefix"></i>
                                    <input id="f-pass" name="f-pass" type="password" class="form-control">
                                    <label for="f-pass" required>New Password</label>
                                </div>

                                <div class="text-center form-sm mt-2">
                                    <button id="f-pass-btn" type="submit" class="btn red">Change Password <i class="fa fa-check ml-1"></i></button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!-- /.fgtpass-step-3 -->

                    <!-- Footer -->
                    <div class="modal-footer">
                        <div class="options text-md-left">
                            <p class="pt-1">
                                Don't have an account?
                                <a id="a-reg2" class="blue-text" data-toggle="tab" href="#panel-reg">Register</a>
                            </p>
                        </div>

                        <button class="btn btn-outline-danger btn-rounded waves-effect ml-auto" type="button" data-dismiss="modal">Close <i class="fa fa-times-circle ml-1"></i></button>
                    </div>
                </div>
                <!-- /.Panel Forgot Password -->
            </div>
        </div>
        <!-- /.Modal Content -->
    </div>
</div>
<!-- /.Modal -->

php

<?php
    require('db.php');
    require('generatePin.php');

    if (!isset($_SESSION)) {
        session_start();
    }

    $email = trim($_POST['f-email']);
    $email = stripslashes($email);
    $email = mysqli_real_escape_string($dbconn, $email);
    //echo $email;

    if (isset($_POST['f-code'])) {
        $code = trim($_POST['f-code']);
        $code = stripslashes($code);
        $code = mysqli_real_escape_string($dbconn, $code);
        //echo $code;
    }

    if (isset($_POST['f-pass'])) {
        $pass = trim($_POST['f-pass']);
        $pass = stripslashes($pass);
        $pass = mysqli_real_escape_string($dbconn, $pass);
        //echo $pass;
    }

    $sql = "SELECT * FROM accounts WHERE email = '$email'";
    $result = mysqli_query($dbconn, $sql);
    $ret = mysqli_fetch_assoc($result);

    $count = mysqli_num_rows($result);

    if (isset($_POST['f-pass']) && isset($_POST['f-code']) && isset($_POST['f-email'])) {
        if ($email == '') {
            echo json_encode('email-empty');
        }
        elseif (!(filter_var($email, FILTER_VALIDATE_EMAIL) && preg_match('/@.+./', $email))) {
            echo json_encode('email-fail');
        }
        elseif ($code == '') {
            echo json_encode('code-empty');
        }
        elseif (strlen($code) != 4) {
            echo json_encode('code-min-max');
        }
        elseif ($count > 0) {
            if ($code == $ret['code'] && $email == $ret['email']) {
                if ($pass == '') {
                    echo json_encode('pass-empty');
                }
                elseif (strlen($pass) < 8) {
                    echo json_encode('pass-min');
                }
                elseif (strlen($pass) > 32) {
                    echo json_encode('pass-max');
                }
                else {
                    echo json_encode('pass-pass');
                }
            }
            else {
                echo json_encode('code-fail');
            }
        }
        else {
            echo json_encode('code-fatal');
        }
    }
    elseif (isset($_POST['f-code']) && isset($_POST['f-email'])) {
        if (strlen($code) != 4) {
            echo json_encode('code-min-max');
        }
        elseif ($count > 0) {
            if ($code == $ret['code'] && $email == $ret['email']) {
                echo json_encode('code-pass');
            }
            else {
                echo json_encode('code-fail');
            }
        }
        else {
            echo json_encode('code-fatal');
        }
    }
    elseif (isset($_POST['f-email'])) {
        if ($email == '') {
            echo json_encode('email-empty');
        }
        elseif (!(filter_var($email, FILTER_VALIDATE_EMAIL) && preg_match('/@.+./', $email))) {
            echo json_encode('email-fail');
        }
        elseif ($count > 0) {
            //Generate 4 digit pin
            $pin = generatePin();

            // Send 4 digit email code
            $header = 'From: F2O <jdesignera.test+f2o@gmail.com>' .
            "rn" .
            'Reply-To: jdesignera.test+f2o@gmail.com';

            mail($email, '[F2O] Verification Code For Password Reset', $pin, $header);

            //Store
            $sql = "UPDATE accounts SET code='$pin' WHERE email='$email'";
            $result = mysqli_query($dbconn, $sql);

            echo json_encode('email-pass');
        }
        else {
            echo json_encode('email-none');
        }
    }
    else {
        echo json_encode('p-fatal');
    }

    mysqli_close($dbconn);
    exit();
?>

---