I've been utilizing the toast feature from Bootstrap, and it works perfectly when displaying a single toast. However, I encountered an issue when trying to display a specific toast, like an error toast, from a list of predefined toasts. It ended up showing all the other toasts as well. My goal is to display only one type of toast at a time, whether it's success, error, warning, etc. I experimented with the following code snippets but they didn't behave as expected.
$('.toast-error').show(); // displays all defined toasts instead of just the selected one
$('.toast-error').toast('show'); // also displays all defined toasts
Below is the HTML structure where I have included all the predefined toasts:
<div aria-live="polite" aria-atomic="true" style="position: relative;z-index: 999999">
<div style="position: absolute; top: 0; right: 0;" class="p-1" id="toast-content">
<div class="toast bg-success toast-success text-white mt-2" role="alert" aria-live="assertive" aria-atomic="true" data-bs-animation="true">
<div class="toast-body">
Welcome To Project.
<button type="button" class="pull-right btn-close btn-close-white ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<div class="toast toast-error bg-danger text-white mt-2" role="alert" aria-live="assertive" aria-atomic="true" data-bs-animation="true" style="display: none;">
<div class="toast-body">
Error Occured. Please Refresh Window.
<button type="button" class="pull-right btn-close btn-close-white ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div>
</div>
<button class="w-100 btn btn-lg submit" type="button" onclick="validator()">Proceed</button>
<script>
function validator(){
$('.toast-error').show();
}
</script>
Can anyone spot where my mistake might be?