Custom consent bar

Hi!
I wanted to built a custom consent bar, and it is almost working but something is going wrong.
I am using elementor pro on my WordPress website, and I’ve built an elementor popup in which I pasted the following html

<div id="cookie-consent-banner" class="cookie-consent-banner">
    <h3>Deze website maakt gebruik van cookies</h3>
    <p>Deze website gebruikt cookies om uw gebruikerservaring te verbeteren. Door onze website te gebruiken, stemt u in met alle cookies in overeenstemming met ons Cookiebeleid.</p>
    <button id="btn-accept-all" class="cookie-consent-button btn-success">Alles accepteren</button>
    <button id="btn-accept-some" class="cookie-consent-button btn-outline">selectie accepteren</button>
    <button id="btn-reject-all" class="cookie-consent-button btn-grayscale">Alles afwijzen</button>
    <div class="cookie-consent-options">
      <label><input id="consent-necessary" type="checkbox" value="Necessary" checked disabled>Noodzakelijk</label>
      <label><input id="consent-analytics" type="checkbox" value="Analytics" checked>Statistieken</label>
      <label><input id="consent-preferences" type="checkbox" value="Preferences" checked>Voorkeuren</label>
      <label><input id="consent-marketing" type="checkbox" value="Marketing">Marketing</label>
    </div>
</div>

I’ve placed the following code in my header.php:

	    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        
        if(localStorage.getItem('consentMode') === null){
            gtag('consent', 'default', {
                'ad_storage': 'denied',
                'analytics_storage': 'denied',
                'personalization_storage': 'denied',
                'functionality_storage': 'denied',
                'security_storage': 'denied',
            });
        } else {
            gtag('consent', 'default', JSON.parse(localStorage.getItem('consentMode')));
        }
    </script>

And the following code in my functions.php

function enqueue_cookie_bar_script() {
    wp_enqueue_script('cookie-bar-script', get_template_directory_uri() . '/cookiebar2.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_cookie_bar_script', 15);

This is the cookiebar2.js file, which is executed. in the console I can see the ‘script started’ but somehow, it is not executing the ‘addEventListerners’ when clicking the buttons. When clicking a button it is closing the popup (so the jQuery part at the bottom is working) but the consent items aren’t updated. Does someone know why this isnt working? Hope someone can help me!

document.addEventListener('DOMContentLoaded', function () {
    console.log("script started");

    function hidePopup() {
        // document.getElementById('cookie-consent-banner').style.display = 'none';
        elementorProFrontend.modules.popup.closePopup({}, event)
    }

    document.getElementById('btn-accept-all').addEventListener('click', function () {
        console.log("btn clicked");
        setConsent({
            necessary: true,
            analytics: true,
            preferences: true,
            marketing: true
        });
        hidePopup();
    });

    document.getElementById('btn-accept-some').addEventListener('click', function () {
        setConsent({
            necessary: true,
            analytics: document.getElementById('consent-analytics').checked,
            preferences: document.getElementById('consent-preferences').checked,
            marketing: document.getElementById('consent-marketing').checked
        });
        hidePopup();
    });

    document.getElementById('btn-reject-all').addEventListener('click', function () {
        setConsent({
            necessary: false,
            analytics: false,
            preferences: false,
            marketing: false
        });
        hidePopup();
    });

    function setConsent(consent) {
        console.log("consent is going to be set");
        const consentMode = {
            'functionality_storage': consent.necessary ? 'granted' : 'denied',
            'security_storage': consent.necessary ? 'granted' : 'denied',
            'ad_storage': consent.marketing ? 'granted' : 'denied',
            'analytics_storage': consent.analytics ? 'granted' : 'denied',
            'personalization': consent.preferences ? 'granted' : 'denied',
        };
        gtag('consent', 'update', consentMode);
        localStorage.setItem('consentMode', JSON.stringify(consentMode));
    };

    jQuery(document).ready(function ($) {
        $(document).on('click', '.cookie-consent-button', function (event) {
            elementorProFrontend.modules.popup.closePopup({}, event);
        });
    });
});

The page I need help with: [log in to see the link]