Javascript 多步骤表单下一步如何进行性别选择？

当选择male时，类名必须与名称为“male”的feildsets一起继续。 选择女性后，应继续使用类名为“famale”的feildsets

我需要帮助，伙计们，我在第一步中通过单选按钮获得性别信息，我不知道如何继续

HTML:

<!-- MultiStep Form //-->
<div class="row justify-content-center">
    <div class="col-md-6 col-md-offset-3">
        <form id="msform">
            <!-- progressbar -->
            <ul id="progressbar">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <!-- fieldsets -->
            <fieldset>
                <h2 class="fs-title">PLEASE CHOOSE<br> YOUR GENDER</h2>
                <div class="form-group">
                    <div class="row justify-content-center">   
                        <div class="col-4 cc-selector" for="gender-famale">
                            <input id="gender-famale" type="radio" name="gender" value="Famale"/>
                            <label class="in" for="gender-famale">
                                <div class="radio-img">
                                    <img src="./Famale/female.png" alt="">
                                </div>
                                <span>Famale</span>
                            </label>
                        </div>
                        <div class="col-4 cc-selector" for="gender-male">
                            <input id="gender-male" type="radio" name="gender" value="Male"/>
                            <label class="in" for="gender-male">
                                <div class="radio-img">
                                    <img src="./Male/male.png" alt="">
                                </div>
                                <span>Male</span>
                            </label>
                        </div>
                    </div>
                </div>
                <input type="button" name="next" class="next action-button" value="Next">
            </fieldset>

            <fieldset class="famale">
                <h2 class="fs-title">FAMALE</h2>
                <input type="button" name="previous" class="previous action-button-previous" value="Previous"/>
                <input type="button" name="next" class="next action-button" value="Next">
            </fieldset>

            <fieldset class="male">
                <h2 class="fs-title">MALE</h2>
                <input type="button" name="previous" class="previous action-button-previous" value="Previous"/>
                <input type="button" name="next" class="next action-button" value="Next">
            </fieldset>
        </form>
    </div>
</div>
<!-- MultiStep Form //-->

var current_fs, next_fs, previous_fs;
var left, opacity, scale;
var animating;

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

    var gender = $('input[name=gender]:checked').val();
    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'
    });
 });

 $(".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();
                animating = false;
            }, 
            //this comes from the custom easing plugin
            easing: 'easeInOutBack'
        });
    });
    
    $(".submit").click(function(){
        return false;
    })