Dismissing Multiple Alerts Bootstrap 5.3

Question

I have 2 alerts with the same content but slightly diffirent styles. One is set aside visible in desktop devices and above, the other for medium screens and below, is sticky bottom. They both share identical code, but their containers are diffirent. e.g.

<div id="desktop" class="d-none d-lg-block">
 <div class="alert alert-dismissible fade show">
    ...
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  </div>
</div>


<div id="smaller-than-desktop" class="d-lg-none">
  <div class="alert alert-dismissible fade show">
   ...
   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  </div>
</div>

Is there a way to dismiss both instanses by clicking the close buton of only the one of them?

I found out that the object that enters the dom last can do the job, not the same with the first one. E.g. if the smaller-than-desktop object comes last in the DOM, dismissing the alert, dismisses also the alert of the desktop object, while in the oposite, the desktop alert is dismissed, but the other is stil living.