如何在一个id中创建多个Popover？

<div id="container">
  <button class="popover-trigger" data-popover-id="popover1">Show Popover 1</button>
  <button class="popover-trigger" data-popover-id="popover2">Show Popover 2</button>

  <div id="popover1" class="popover">Popover 1 Content</div>
  <div id="popover2" class="popover">Popover 2 Content</div>
</div>

.popover {
  display: none;
  position: absolute;
  background-color: white;
  border: 1px solid #ccc;
  padding: 10px;
  z-index: 1000;
}

document.addEventListener('DOMContentLoaded', function() {
  const triggers = document.querySelectorAll('.popover-trigger');
  const popovers = document.querySelectorAll('.popover');

  triggers.forEach(trigger => {
    trigger.addEventListener('click', function() {
      const popoverId = this.getAttribute('data-popover-id');
      const popover = document.getElementById(popoverId);
      popovers.forEach(p => p.style.display = 'none');
      popover.style.display = 'block';
    });
  });
});