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.