Multistep form in bootstrap with final review functions in jquery

Question

I want create a multistep form with the help of bootstrap and jquery but issue is I am not able to create page previous preview means back button functon from page 2 to page 1 and so on, or not able to create last final form submit review in jquery. it is because I am not familiar with jquery and I am currently learning stage of this subject.

As the stackoverflow the developer zone, here lots of wanna and senior developer here, Please help me to create my project as above I mentioned.

I research for the basic basic code of this but it was not helpful and not worded at my project even I try to search the already made form on Codepen.io but there I also I also not found which review final submit and validate forms.

$('.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>
   

Please help me and provide me a jsfiddle which works.

Thanks!