I am using bootstrap 5.1 alerts to show specific messages upon an Ajax call. Also, I would like to dismiss the alert if needed. For that, bootstrap allows to have a dismiss button.

Here is my php :

<div class="alert alert-warning alert-dismissible" role="alert" style="display:none;" id="message-response-given">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

And the relevant js for the Ajax call :

document.getElementById("message-response-given").innerHTML = res.message;
$('#message-response-given').fadeIn();

This shows the message BUT not the button after the Ajax call.

I have read the following (bootstrap alerts, same link as above) :

When an alert is dismissed, the element is completely removed from the page structure. If a keyboard user dismisses the alert using the close button, their focus will suddenly be lost and, depending on the browser, reset to the start of the page/document. For this reason, we recommend including additional JavaScript that listens for the closed.bs.alert event and programmatically sets focus() to the most appropriate location in the page. If you’re planning to move focus to a non-interactive element that normally does not receive focus, make sure to add tabindex="-1" to the element.

But I have no clue how to do it.....