Javascript removeClass/toggleClass works on desktop but not responsive page

Question

I bought this theme a while back and have been chopping it up and modifying it to add/remove functionality. There is this slidein menu that appears on the page once a link is clicked from the navbar menu. The issue is that there is an X button to close the menu that is supposed to toggle/remove a class from the #btn-offcanvas-menu element when it is clicked (#btn-close-canvasmenu is clickable element); it works on the desktop but not the responsive mobile site. The only way it is toggled/removed on mobile is if the original link is clicked again. I have looked at the below questions here, and several others, including trying to use the closest/find options but nothing seems to work. What am I missing?

Desired behavior: the isLeft class should toggle/be removed when the #btn-close-canvasmenu link is clicked. It is on desktop but not mobile.

• Javascript not working on mobile but works on desktop.
• JavaScript - removeClass not working?
• ToggleClass and RemoveClass not working
• JQuery - ToggleClass/AddClass/RemoveClass
• How to toggle class of closest element jquery toggle class on closest span

This is relevant portion of the index page...

    <li id="recent-mobile"><!-- this is hidden by CSS on desktop -->
            <a id="btn-offcanvas-menu" href="#">Recent Results</a>
    </li>
    <li id="recent-results"><!-- this is hidden by CSS on mobile -->
        <div class="header-buttons pull-right hidden-xs hidden-sm">
            <div class="navright-button">
                <a href="#" id="btn-offcanvas-menu"><i class="fa fa-bars">  Recent Results</i></a>
            </div>
        </div>
    </li>

    <!-- Menu OffCanvas right begin -->
    <div class="navright-button">
        <div class="compact-menu-canvas" id="offcanvas-menu">
            <h3>menu</h3><a id="btn-close-canvasmenu"><i class="fa fa-close"></i></a>
            <nav>
                <ul class="clearfix">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="features.html">Features</a></li>
                    <li><a href="pages.html">Pages</a></li>
                    <li><a href="portfolio.html">Portfolios</a></li>
                    <li><a href="shop.html">Shop</a></li>
                    <li><a href="blog.html">Blog</a></li>
                    <li><a href="contact.html">Contact Us</a></li>
                </ul>
            </nav>
        </div>
    </div>
    <!-- Menu OffCanvas right close -->

This is the relevant portion of the javascript compact.js file...

$("#btn-close-canvasmenu").on("click", function() {
    $("#offcanvas-menu").stop().animate({
        right: "-260px"
    }, 300), $("a#btn-offcanvas-menu").removeClass("isLeft")
});

$(document).on("click", "#btn-offcanvas-menu, #btn-offcanvas-menu-mobile", {} , function(a){
    var id = $(this).attr('id');
    if (id === "btn-offcanvas-menu-mobile") {
        $("#btn-close-canvasmenu").toggleClass("mobile");
    }

    return a.preventDefault(), $(this).hasClass("isLeft") ? $("#offcanvas-menu").stop().animate({
        right: "-260px"
    }, 300) : $("#offcanvas-menu").stop().animate({
        right: "0px"
    }, 300), $(this).toggleClass("isLeft"), false
});

EDIT (fixed 2/16/20): I edited the js file file to reflect this updated function: $("#btn-close-canvasmenu").on("click", function()

Essentially, what fixed it was changing the selector from #btn-offcanvas-menu to a#btn-offcanvas-menu. Not sure why that worked as opposed to using closest/find method but once I did, it toggled/removed the class on both desktop and mobile correctly. If anyone has anything thoughts on why the a made the difference with the selector, I'd appreciate the feedback as I am not an expert on js/jQuery. Otherwise, this can be considered closed.

Answer 1

Changing the selector in the compact.js file from #btn-offcanvas-menu to a#btn-offcanvas-menu fixed the issue and while this worked, it was the wrong way to correct the issue as connexo pointed out due to the duplicate ids.

The correct way to resolve this was to change the mobile navbar itself so I could use an id specifically for the mobile that only appeared there.

<nav id="mobile-menu" class="site-mobile-menu hidden-lg hidden-md">
    <ul>
        <li id="recent-mobile">
            <a href="#" id="btn-offcanvas-menu-mobile">Recent Results</a>
        </li>
    </ul>
</nav>

Next I changed the js function that populated the html for the mobile menu to use prepend instead of append so it populated everything above the Recent Results link...

$("#desktop-menu > ul").children().clone().prependTo($("#mobile-menu > ul")), $("#show-mobile-menu").on("click", function() {
    $(this).toggleClass("clicked"), $("#mobile-menu > ul").stop(true, true).slideToggle()
}); 

Then I tweaked the js function to toggle the class to mobile for the #btn-close-canvasmenu if the selector was #btn-offcanvas-menu-mobile to be used later...

$(document).on("click","#btn-offcanvas-menu,#btn-offcanvas-menu-mobile", {} , function(a){
    var id = $(this).attr('id');

    if (id === "btn-offcanvas-menu-mobile") {
        $("#btn-close-canvasmenu").toggleClass("mobile");
    }

    return a.preventDefault(), $(this).hasClass("isLeft") ? $("#offcanvas-menu").stop().animate({
        right: "-260px"
    }, 300) : $("#offcanvas-menu").stop().animate({
        right: "0px"
    }, 300), $(this).toggleClass("isLeft"), false
});

Finally, I tweaked the js function that closed the menu to check the class to determine which id to toggle the isLeft class for...

$(document).on("click","#btn-close-canvasmenu", {} , function(a){
    var id = $(this).attr('id');

    if ($(this).hasClass("mobile")) {
        var container = $("#btn-offcanvas-menu-mobile");
        $("#btn-close-canvasmenu").toggleClass("mobile");
    } else {
        var container = $("#btn-offcanvas-menu");
    }

    $("#offcanvas-menu").stop().animate({
        right: "-260px"
    }, 300), container.removeClass("isLeft")
});