const dedupe = (): void => {
  const seen = new Set<string>();
  const elements = document.querySelectorAll('[data-id]');

  elements.forEach(item => {
    const id = item.getAttribute('data-id');
    if (!id) {
      return;
    }
    if (seen.has(id)) {
      item.remove(); // duplicate, remove it
    } else {
      seen.add(id);
    }
  });
};

// run on DOM ready or immediately if already loaded
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', dedupe);
} else {
  dedupe();
}

// also run on load as a fallback (e.g. htmx swaps)
window.addEventListener('load', dedupe);