jQuery .on(click) function containing IF statement checking for .hasClass() always returning true when it does not contain the class?

I have been battling a dodgy IF that keeps returning a true value although the class it is checking for is not present on page load.

I am trying to add the class if it is not there, then remove the class when it is there.

The console.logs show it is correctly grabbing the attributes for popular-value & full, successfully logging these in their respective console.logs. However, the IF always console.logs 'has class'.

Here is the function:

$(document).on("click", ".popular-tag", function(){
    var popularTag = $(this);
    var popularTagSlug = popularTag.attr('popular-value');
    console.log(popularTagSlug);
    var popularTagName = popularTag.attr('popular-full');
    console.log(popularTagName);

    if (popularTag.hasClass('selected')) {
        console.log('has class');
        popularTag.removeClass('selected');
        popularTag.removeClass('selected-tag');
        popularTag.removeAttr('data-slug');
        popularTag.removeAttr('data-name');
    } else {
        console.log('doesnt have class');
        popularTag.addClass('selected');
        popularTag.addClass('selected-tag');
        popularTag.attr('data-slug', popularTagSlug);
        popularTag.attr('data-name', popularTagName);
    }
});

Here Is the HTML is it playing with (BEFORE CLICK):

<div class="popular-tags-selection">

    <div class="popular-tags-selection-title">
        Popular properties
    </div>

    <div id="popular-tags" class="popular-tags">

        <div class="search-tag popular-tag" popular-value="aesthetic" popular-full="Aesthetic"><div class="popular-tag-title">Aesthetic</div></div>
        <div class="search-tag popular-tag" popular-value="corrosion-resistant" popular-full="Corrosion resistant"><div class="popular-tag-title">Corrosion resistant</div></div>
        <div class="search-tag popular-tag" popular-value="hard" popular-full="Hard"><div class="popular-tag-title">Hard</div></div>

    </div>

</div>

This is the same code (AFTER CLICK):

<div class="popular-tags-selection">

    <div class="popular-tags-selection-title">
        Popular properties
    </div>

    <div id="popular-tags" class="popular-tags">

        <div class="search-tag popular-tag" popular-value="aesthetic" popular-full="Aesthetic"><div class="popular-tag-title">Aesthetic</div></div>
        <div class="search-tag popular-tag" popular-value="corrosion-resistant" popular-full="Corrosion resistant"><div class="popular-tag-title">Corrosion resistant</div></div>
        <div class="search-tag popular-tag" popular-value="hard" popular-full="Hard"><div class="popular-tag-title">Hard</div></div>

    </div>

</div>

This is the console after the two clicks:

11:55:17.801 ready-functions.js?200226115513:448 aesthetic
11:55:17.989 ready-functions.js?200226115513:450 Aesthetic
11:55:17.989 ready-functions.js?200226115513:453 has class
11:55:18.801 ready-functions.js?200226115513:448 aesthetic
11:55:18.801 ready-functions.js?200226115513:450 Aesthetic
11:55:18.801 ready-functions.js?200226115513:453 has class

Why is this always saying the class 'selected' is there?

I appreciate I am probably being daft, appreciate any contributors, Jason.

$(document).on("click", ".popular-tag", function(){
                var popularTag = $(this);
                var popularTagSlug = popularTag.attr('popular-value');
                console.log(popularTagSlug);
                var popularTagName = popularTag.attr('popular-full');
                console.log(popularTagName);

                if (popularTag.hasClass('selected')) {
                        console.log('has class');
                        popularTag.removeClass('selected');
                        popularTag.removeClass('selected-tag');
                        popularTag.removeAttr('data-slug');
                        popularTag.removeAttr('data-name');
                } else {
                        console.log('doesnt have class');
                        popularTag.addClass('selected');
                        popularTag.addClass('selected-tag');
                        popularTag.attr('data-slug', popularTagSlug);
                        popularTag.attr('data-name', popularTagName);
                }
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="popular-tags-selection">

                <div class="popular-tags-selection-title">
                        Popular properties
                </div>

                <div id="popular-tags" class="popular-tags">

                        <div class="search-tag popular-tag" popular-value="aesthetic" popular-full="Aesthetic"><div class="popular-tag-title">Aesthetic</div></div>
                        <div class="search-tag popular-tag" popular-value="corrosion-resistant" popular-full="Corrosion resistant"><div class="popular-tag-title">Corrosion resistant</div></div>
                        <div class="search-tag popular-tag" popular-value="hard" popular-full="Hard"><div class="popular-tag-title">Hard</div></div>

                </div>

        </div>

Upon adding this snippet into the fiddle, it appears to work. Does anyone know how I can go about troubleshooting this so I can find out why this doesn't operate as planned?

EDIT (Adding full jQuery to help further troubleshooting) :

// TAG DROPDOWN TAGS
$(document).on("click", ".search-tag", function(e){
    e.stopPropagation();
    var searchTag = $(this);
    var searchTagSlug = searchTag.attr('value');
    var searchTagName = searchTag.attr('name');

    if (searchTag.hasClass('selected')) {
        searchTag.removeClass('selected');
        searchTag.removeClass('selected-tag');
        searchTag.removeAttr('data-slug');
        searchTag.removeAttr('data-name');
    } else {
        searchTag.addClass('selected');
        searchTag.addClass('selected-tag');
        searchTag.attr('data-slug', searchTagSlug);
        searchTag.attr('data-name', searchTagName);
    }

    var popularTags = $('#popular-tags');
    var alsoPopularTag = popularTags.children('[popular-value=' + searchTagSlug + ']');
    if (alsoPopularTag.length) {
        if (alsoPopularTag.hasClass('selected')) {
            alsoPopularTag.removeClass('selected');
            alsoPopularTag.removeClass('selected-tag');
            alsoPopularTag.removeAttr('data-slug');
            alsoPopularTag.removeAttr('data-name');
        } else {
            alsoPopularTag.addClass('selected');
            alsoPopularTag.addClass('selected-tag');
            alsoPopularTag.attr('data-slug', searchTagSlug);
            alsoPopularTag.attr('data-name', searchTagName);
        }
    }

    var selectedTags = $('#selected-tags');
    var alsoSelectedTag = selectedTags.children('[data-selected-tag-slug=' + searchTagSlug + ']');
    if (alsoSelectedTag.length) {
        alsoSelectedTag.remove();
    } else {
        selectedTags.prepend('<div class="selected-tag-quick" data-slug="' + searchTagSlug + '" data-name="' + searchTagName + '" data-selected-tag-slug="' + searchTagSlug + '" data-selected-tag-name="' + searchTagName + '"><div class="selected-tag-quick-name">' + searchTagName +'</div></div>');
    }
});
// END TAG DROPDOWN TAGS

// POPULAR TAGS
$(document).on("click", ".popular-tag", function(){
    var popularTag = $(this);
    var popularTagSlug = popularTag.attr('popular-value');
    console.log(popularTagSlug);
    var popularTagName = popularTag.attr('popular-full');
    console.log(popularTagName);

    if (popularTag.hasClass('selected')) {
        console.log('has class');
        popularTag.removeClass('selected');
        popularTag.removeClass('selected-tag');
        popularTag.removeAttr('data-slug');
        popularTag.removeAttr('data-name');
    } else {
        console.log('doesnt have class');
        popularTag.addClass('selected');
        popularTag.addClass('selected-tag');
        popularTag.attr('data-slug', popularTagSlug);
        popularTag.attr('data-name', popularTagName);
    }

    var searchTags = $('#search-tags-list');
    var alsoSearchTag = searchTags.children('[value=' + popularTagSlug + ']');
    if (alsoSearchTag.length) {
        if (alsoSearchTag.hasClass('selected')) {
            alsoSearchTag.removeClass('selected');
            alsoSearchTag.removeClass('selected-tag');
            alsoSearchTag.removeAttr('data-slug');
            alsoSearchTag.removeAttr('data-name');
        } else {
            alsoSearchTag.addClass('selected');
            alsoSearchTag.addClass('selected-tag');
            alsoSearchTag.attr('data-slug', popularTagSlug);
            alsoSearchTag.attr('data-name', popularTagName);
        }
    }

    var selectedTags = $('#selected-tags');
    var alsoSelectedTag = selectedTags.children('[data-selected-tag-slug=' + popularTagSlug + ']');
    if (alsoSelectedTag.length) {
        alsoSelectedTag.remove();
    } else {
        selectedTags.prepend('<div class="selected-tag-quick" data-slug="' + popularTagSlug + '" data-name="' + popularTagName + '" data-selected-tag-slug="' + popularTagSlug + '" data-selected-tag-name="' + popularTagName + '"><div class="selected-tag-quick-name">' + popularTagName +'</div></div>');
    }
});
// END POPULAR TAGS

// SELECTED TAGS
$(document).on("click", ".selected-tag-quick", function(e){
    var selectedTag = $(this);
    var selectedTagSlug = selectedTag.attr('data-selected-tag-slug');
    var selectedTagName = selectedTag.attr('data-selected-tag-name');

    selectedTag.remove();

    var searchTags = $('#search-tags-list');
    var alsoSearchTag = searchTags.children('[value=' + selectedTagSlug + ']');
    if (alsoSearchTag.length) {
        if (alsoSearchTag.hasClass('selected')) {
            alsoSearchTag.removeClass('selected');
            alsoSearchTag.removeClass('selected-tag');
            alsoSearchTag.removeAttr('data-slug');
            alsoSearchTag.removeAttr('data-name');
        } else {
            alsoSearchTag.addClass('selected');
            alsoSearchTag.addClass('selected-tag');
            alsoSearchTag.attr('data-slug', selectedTagSlug);
            alsoSearchTag.attr('data-name', selectedTagName);
        }
    }

    var popularTags = $('#popular-tags');
    var alsoPopularTag = popularTags.children('[data-value=' + selectedTagSlug + ']');
    if (alsoPopularTag.length) {
        if (alsoPopularTag.hasClass('selected')) {
            alsoPopularTag.removeClass('selected');
            alsoPopularTag.removeClass('selected-tag');
            alsoPopularTag.removeAttr('data-slug');
            alsoPopularTag.removeAttr('data-name');
        } else {
            alsoPopularTag.addClass('selected');
            alsoPopularTag.addClass('selected-tag');
            alsoPopularTag.attr('data-slug', selectedTagSlug);
            alsoPopularTag.attr('data-name', selectedTagName);
        }
    }
});
// END SELECTED TAGS