Многошаговая форма в начальной загрузке с функциями окончательного просмотра в jquery

Question

Я хочу создать многоэтапную форму с помощью начальной загрузки и jquery, но проблема в том, что я не могу создать предыдущее окно предварительного просмотра страницы, означает функцию кнопки возврата со страницы 2 на страницу 1 и т. Д., Или не могу создать последнюю окончательную форму отправить отзыв в jquery. это потому, что я не знаком с jquery и в настоящее время изучаю стадию этого предмета.

Поскольку стек переполняет зону разработчиков, здесь много желающих и старших разработчиков, пожалуйста, помогите мне создать мой проект, как я упоминал выше.

Я исследую основной базовый код этого, но это не помогло и не сформулировало мой проект, даже я пытаюсь найти уже созданную форму на Codepen.io, но там я также не нашел, какой отзыв окончательно отправить и подтвердить формы.

$('.adddusers_panel .btn1').on('click', function () {
        var parent_fieldset = $(this).parents('fieldset');
        var next_step = true;

        parent_fieldset.find('input[type="text"]').each(function () {
            if ($(this).val() == "") {
                $(this).addClass('input-error');
                next_step = false;
            } else {
                $(this).removeClass('input-error');
            }
        });
        if (next_step) {
            parent_fieldset.fadeOut(400, function () {
                $("#step1").removeClass("active");
                $("#step1").addClass("complete");
                $(".badge-info").addClass("badge-success")
                $("#step2").addClass("active");
                $(this).next().fadeIn();
            });
        }

        $('.adddusers_panel .btnbcg').on('click', function () {
        $(this).parents('fieldset').fadeOut(400, function () {
            $(this).prev().fadeIn();
        });
        });

    });

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="step-content">
                                                    <form id="adddusers_panel" class="adddusers_panel">
                                                        <fieldset>
                                                            <div class="step-pane step-pane1 active">
                                                                 <p>User Full Name:</p>
                                                                  <input type="text" name="userfname"  id="userfname" class="form-control" data-trigger="change" data-required="true" data-type="name" placeholder="Full Name" required>
                                                                  <p class="m-t">Gender:</p>
                                                                  <input type="text" name="gender" id="gender" class="form-control" data-trigger="change" data-required="true" data-type="gender" placeholder="Gender">

                                                                  <div class="actions m-t">
                                                                    <button type="button" class="btn btn1 btn-info btn-sm btn-next" data-target="#form-wizard" data-wizard="next" data-last="Finish">Next</button>
                                                                </div>
                                                            </div>
                                                        </fieldset>
                                                        
                                                        <div class="step-pane step-pane2">
                                                        <fieldset>
                                                            <p>Your email:</p>
                                                            <input type="text" class="form-control" data-trigger="change" data-required="true" data-type="email" placeholder="email address"/>
                                                            <div class="actions m-t">
                                                                    <button type="button" class="btn btnbcg btn-default btn-sm btn-prev" data-target="#form-wizard" data-wizard="previous" >Prev</button>
                                                                    <button type="button" class="btn btn2 btn-info btn-sm btn-next" data-target="#form-wizard" data-wizard="next" data-last="Finish">Next</button>
                                                            </div>

                                                        </fieldset>
                                                        </div>
                                                        
                                                       
                                                    </form>
   

Пожалуйста, помогите мне и предоставьте мне jsfiddle, который работает.

Спасибо!