Issues with if/else-if statement not adding class

Objective

I have a list of 60 hockey players. When the maximum number of players from each position (goalies, defencemen, forwards) are picked two things should happen:

• The class of is-completed is added to icon-checkmark, which should turn it from grey to yellow to show that task is completed
• Other players of that position that have not been selected should be unable to be clicked due to .css() pointer-events: none

Problem

a) The class is-completed is only being added to checkmark--goalie, but not the other checkmarks which relate to the other positions, so I have a feeling there is something wrong with the if/else-if statement.

b) Even if the max number of players in their positions (2 goalies, 6 defencemen, 12 forwards) are picked, you are still able to click additional players with the class is-inactive

index.html

// Checkmarks
        <section class="main__selected">
            <p class="main__check"><i class="icon-checkmark checkmark--goalie fa fa-check" aria-hidden="true"></i>Pick 2 out of 10 of the goalies</p>
            <p class="main__check"><i class="icon-checkmark checkmark--defencemen fa fa-check" aria-hidden="true"></i>Pick 6 out of the 20 defencemen</p>
            <p class="main__check"><i class="icon-checkmark checkmark--forward fa fa-check" aria-hidden="true"></i>Pick 12 of the 30 forwards</p>
        </section> <!-- .main__selected -->


// Player
    <div class="player player--goalie year--1990">
                    <div class="tooltip tooltip--tall">
                        <p class="tooltip__name">Brian Elder</p>
                        <p class="tooltip__hometown"><span>Hometown:</span> Oak Lake, Man.</p>
                        <p class="tooltip__years"><span>Years Played:</span> 1992-1997</p>
                        <div class="tooltip__stats--inline">
                            <div class="stats__group stats--goalsag">
                                <p class="stats__header">GA</p>
                                <p class="stats__number">2.00</p>
                                <p class="stats__number">3.12</p>
                                <p class="stats__number">3.46</p>
                                <p class="stats__number">2.70</p>
                            </div>

                            <div class="stats__group stats--save">
                                <p class="stats__header">SAV%</p>
                                <p class="stats__number">.909</p>
                                <p class="stats__number">.886</p>
                                <p class="stats__number">.884</p>
                                <p class="stats__number">.906</p>
                            </div>

                            <div class="stats__group stats--shutouts">
                                <p class="stats__header">SO</p>
                                <p class="stats__number">0</p>
                                <p class="stats__number">0</p>
                                <p class="stats__number">3</p>
                                <p class="stats__number">2</p>
                            </div>
                        </div> <!-- tooltip__stats--inline -->
                    </div> <!-- tooltip -->
                    <div class="player__headshot player--elder">
                        <div class="picked is-inactive"><i class="fa fa-star" aria-hidden="true"></i></div>
                    </div>
                    <p class="player__name">Brian Elder</p>
                    <p class="player__position">Goalie</p>
                </div>

scripts.js (snippet)

/*-------------------------------------
COUNT SELECTED
--------------------------------------*/

function countSelected() {
    $(".player").on("click", function(){

        // Count the number of players with stars
        var starredGoaltenders = $(".player--goalie").find(".picked.is-active").length;
        var starredDefencemen = $(".player--defencemen").find(".picked.is-active").length;
        var starredForwards = $(".player--forward").find(".picked.is-active").length;

        console.log(starredGoaltenders, starredDefencemen, starredForwards);

        // The number of starred players for each position cannot exceed the following numbers
        var maxGoaltenders = 2;
        var maxDefencemen = 6;
        var maxFowards = 12;

        // If the number of starred players hits its max, the other unstarred players in that group cannot be clicked unless one is deselected first

        if (starredGoaltenders === maxGoaltenders) {
            $(".checkmark--goalie").addClass("is-completed");
            $(".player--goalie").find(".picked.is-inactive").css("pointer-events", "none");
        } else if (starredDefencemen === maxDefencemen) {
            $(".checkmark--defencemen").addClass("is-completed");
            $(".player--defencemen").find(".picked.is-inactive").css("pointer-events", "none");
        } else if (starredForwards === maxFowards) {
            // Not working unless done first?
            $(".checkmark--forward").addClass("is-completed");
            $(".player--forward").find(".picked.is-inactive").css("pointer-events", "none");
        }
    });
} countSelected();