Repetitive Info appearing using Blade HTML and JS

Below is my code, I want to understand how to fix the problem of my main functions section include the management, cashier and report appearing twice on the web page. I also added some javascript code at the bottom trying to call the ID from the ‘you’re logged in’ message and have it disappear after three seconds. When I added this code, it is just making the duplicate section disappear after three seconds and not the message. Pls and ty for anyone with any type of suggestion!

{{ __(‘Restaurant Manager’) }}

<div class="py-12">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg" id="loggedInMessage"> 
            <div class="p-6 text-gray-900 dark:text-gray-100">
                {{ __("You're logged in!") }}
            </div>

    <div class="center-container">
        <div class="center-content">
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <div class="card">
                        <div class="card-header">Main Functions</div>
                    </div>
                </div>
            </div> 
        </div>
    </div>

        <div class="container">
        <div class="row text-center"> 
            <div class="col-sm-4 management"> 
            <a href="/management">
                <h4>
                <i class="fa-solid fa-database"></i> Management
                </h4>
                <img width="50px" src="{{asset('images/management.svg')}}"/>
                </a>
            </div> 

            <div class="col-sm-4 cashier"> 
            <a href="/cashier">
                <h4> 
                <i class="fa-solid fa-money-bill-transfer"></i> Cashier
                </h4>
                <img width="50px" src="{{asset('images/cashier.svg')}}"/>
                </a>
            </div>

            <div class="col-sm-4 report">
            <a href="/report">
                <h4>
                <i class="fas fa-list-check"></i> Report
                </h4>
                <img width="50px" src="{{asset('report/management.svg')}}"/>
                </a>
            </div>

        </div>               
        </div>
        </div>
    </div>
</div>
<script>
    document.addEventListener('DOMContentLoaded', function() {
    const loggedInMessage = document.getElementById('loggedInMessage');

    const hideLoggedInMessage = () => {
        if (loggedInMessage) {
            setTimeout(() => {
            loggedInMessage.style.display = 'none';
        }, 3000);
    }
};

    hideLoggedInMessage();
});

</script>

I tried adding this block – loggedInMessage.style.display = ‘block’; – to the js code, below the start of the if statement, but that is just making the whole web page disappear after three seconds.