on click checks if an element has an Class then removing class from 2nd element

So i’m doing an school project. What I wanted and how i wanted it to work is quite simple actually. On button click there’s an function who check’s if an image has “border” class, if it does it removes “hidden” class from ‘section-1’ and ‘section-1-text’. But I cant make it work.. Can anyone help me! Thanks in advance.

This is HTML

        <div class="inputs">
        <form action="/" method="get">
            <label for="weight">Weight:</label>
            <input type="text" id="weight" name="weight" placeholder="Enter your Weight">
            <label for="height">Height:</label>
            <input type="text" id="height" name="height" placeholder="Enter your Height">
        </form>
        <div class="malefemaleicons">
            <img src="./img/male.png" id="male">
            <img src="./img/female.png" id="female">
        </div>
        <button class="getfitbutton" id="gobutton">Go</button>
    </div>

This is Javascript

    var female = $('#male');
    button = $('#gobutton');
    $(document).ready(function() {
        $('#gobutton').click(function(){
            if(female.hasClass('border')) {
                $('.section-1').removeClass('hidden');
                $('.selection-1-text').removeClass('hidden');
            }
        });
    });

That’s all i could come up with.