JavaScript cant get element from object : <p>I can't use the html elment with the id </p>

<blockquote>
  <p>notification-panel-sidebar</p>
</blockquote>

<p>in my JavaScript, but I can Access it directly using jquery.</p>

<p>This is the Code:</p>

<pre><code>const notificationContainer = {

    elements: {
        notificationPanelSidebar: $('#notification-panel-sidebar'),
        notificationPanelSidebarContainer: $('#notification-panel-sidebar-container')
    },

    classes: {
        notificationContainerActive: 'notification-container-active'
    },

    render () {
        this.toggleNotificationContainer();
    },

    toggleNotificationContainer () {
        console.log(this.elements.notificationPanelSidebar);
        this.elements.notificationPanelSidebar.click((e) =&gt; { // this does not work
        // $('#notification-panel-sidebar').click((e) =&gt; { // this works
            let _this = $(e.currentTarget);
            if (_this.hasClass(this.classes.notificationContainerActive)) {
                console.log("+++++++");
                this.hideNotificationContainer();
            } else {
                console.log("-------");
                _this.addClass(this.classes.notificationContainerActive);
                this.elements.notificationPanelSidebarContainer.show();
            }
        });
    },

    hideNotificationContainer () {
        this.elements.notificationPanelSidebar.removeClass(this.classes.notificationContainerActive);
        this.elements.notificationPanelSidebarContainer.hide();
    }

}

$(document).ready(function () {
    notificationContainer.render();
});
</code></pre>

<p>I get no error message.</p>
