addeventlistener click not working after resizing the window

I am currently working on 2 animations for a woocommerce shop and I am using AstraWp as a Parent Theme. Here’s the code i am using for the animations. The problem is, when I am resizing the Browser Window, the eventlisteners seem to stop working after I hit a breakpoint. Any ideas why this is happening?? Thanks in advance!

/**
 * LionHead Animation
 */


const lionhead = document.querySelector('#lionhead');
const productMenuBtn = document.querySelector('#product-menu-btn')
let productMenuOpen = false;

productMenuBtn.addEventListener('click', () => {
    if(!productMenuOpen){
        lionhead.classList.add('p_open');
        productMenuOpen = true;
        console.log("closed");
    }
    else{
        lionhead.classList.remove('p_open')
        productMenuOpen = false;
        console.log("open");
    }

})


/*Menu Button*/

const menuBtn = document.querySelector('.menu-btn');
console.log(menuBtn);
let menuOpen = false;
menuBtn.addEventListener('click', () => {
    if(!menuOpen){
        menuBtn.classList.add('open');
        menuOpen = true;
        console.log(menuOpen);

    }else{
        menuBtn.classList.remove('open');
        menuOpen = false;
        console.log(menuOpen);

    }
});

Source: Ask Javascript Questions

LEAVE A COMMENT