<div class="container py-5" style="max-width:520px">
  <div id="bsalertStack">
    <div class="alert alert-warning alert-dismissible fade show" role="alert">
      Your trial ends in 3 days. <a href="javascript:void(0)" class="alert-link">Upgrade now</a>.
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <div class="alert alert-info alert-dismissible fade show" role="alert">
      New dashboard layout is available in Settings.
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
  </div>
  <p class="text-muted small mt-2">Open: <strong id="bsalertCount">2</strong></p>
</div>

#bsalertStack .alert:last-child { margin-bottom: 0; }

const stack = document.getElementById('bsalertStack');
const countEl = document.getElementById('bsalertCount');

function recount() {
  countEl.textContent = stack.querySelectorAll('.alert').length;
}

// Bootstrap's own Alert component removes the element from the DOM once its
// fade-out finishes, firing closed.bs.alert — but that event does not bubble
// up to a parent container the way native DOM events do, so the listener has
// to sit on each individual alert rather than once on the shared wrapper.
stack.querySelectorAll('.alert').forEach(alert => alert.addEventListener('closed.bs.alert', recount));
recount();