'Any ideas why error pop up is not interactable when you're not logged in but it's interactable after you logged in on Flask?

If the user is not logged in the popup is not interactable but once the user logs in it can be interacted with, not sure why this actually happens and it doesn't seem like it's a JavaScript problem, couldn't find any solutions to it by searching around. I wonder what could cause this behavior on Flask

HTML + Jinja2 :

<body>

    {% with messages = get_flashed_messages(with_categories=true) %} 
        {% if messages %}
            {% for category, message in messages %}
                {% if category == "soft-error" %}

                <div class="toast" id="toast">
                    <div class="toast-content">
            
                        <div class="close-btn">
                            <a class="wa-close icon-pos" id="close-btn"></a>
                        </div>
            
                        <div class="message">            
                            <div class="text-content">
                                <p class="text text-1" id="txt-hide">Error</p>
                                <span class="text text-2" id="txt-hide-2">{{ message }}</span>
                            </div>
                        </div>
            
                    </div>
                </div>
                    {% endif %}
            {% endfor %} 
        {% endif %} 
    {% endwith %} 
    {% block content %}{% endblock%}
</body>

JavaScript :

const closeBtn = document.getElementById('close-btn');
const toast = document.getElementById("toast");

closeBtn.addEventListener('click', () => {
    toast.parentNode.removeChild(toast);
});

setTimeout(function() {
    toast.parentNode.removeChild(toast);
}, 5000);


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source