Getting an element to able to be clicked after addClass("disabled")

Problem #2 (Unresolved, need help)

Last updated: 2:20 p.m. EST

In the case of ethnicity (see scripts.js), I'm looking to have users be able to select two items before things are unable to be selected. For example, they could click <p class="rect E1">White</p> and <p class="rect E2">Black</p>

How would I go about doing this?

---

Update to Problem #1:

I've made it so that clicking <p class="rect G1">Male</p> located in my index.html will add a class of .disabled (see my chart.scss) to the option "Female" <p class="rect G2">Female</p> making it unclickable.

I want the user be able to be able to click the option for Female, only if the Male option is clicked a second time to be "unselected." I've tried to .removeClass(".disabled"), but that hasn't worked.

Solution

$(".G2).toggleClass("disabled")

index.html

<section class="selection">
                <div class="gender">
                    <p class="category">Gender</p>
                    <div class="options">
                        <p class="rect G1">Male</p>
                        <p class="rect G2">Female</p>
                    </div><!-- /.options -->
                </div><!-- /.gender -->

                <div class="age">
                    <p class="category">Age</p>
                    <div class="options">
                        <p class="rect A1">Under 35</p>
                        <p class="rect A2">36-64</p>
                        <p class="rect A3">65+</p>
                    </div><!-- /.options -->
                </div><!-- /.age -->

                <div class="ethnicity">
                    <p class="category">Ethnicity<span>*<span></p>
                    <div class="options">
                        <p class="rect E1">White</p>
                        <p class="rect E2">Black</p>
                        <p class="rect E3">Aboriginal</p>
                        <p class="rect E4">Metis</p>
                        <p class="rect E5">Asian</p>
                    </div><!-- /.options -->
                </div><!-- /.ethnicity -->
            </section>

                <img src="assets/img/headshots/allan.jpg" alt="" class="headshot NDP Female White">
                <img src="assets/img/headshots/allum.jpg" alt="" class="headshot NDP Male White">
                <img src="assets/img/headshots/altemeyer.jpg" alt="" class="headshot NDP Male White">

scripts.js

    $(function() {

        // Numbers
        var total = 56
        var male = 41;
        var female = 15;

        // Option #1: Gender
    $( ".G1" ).click(function() {
        $(".G2").addClass("disabled");
        $(".headshot").not(".Female").toggleClass("opacity");
        // $(".G2").removeClass("disabled");
        $(".number").html(total - female);
    });

    $( ".G2" ).click(function() {
        $(".G1").addClass("disabled");
        $(".headshot").not(".Male").toggleClass("opacity");
        $(".number").html(total - male);
    });
});

chart.scss

.disabled {
    pointer-events: none;
}