Use delegated handlers for edit panel

claims/templates/claims/dashboard.html

@@ -435,7 +435,6 @@ document.addEventListener("DOMContentLoaded", () => {
     const filterButtons = Array.from(document.querySelectorAll("[data-filter-button]"));
     const cards = Array.from(document.querySelectorAll("[data-claim-card]"));
     const emptyState = document.querySelector("[data-claim-empty]");
-    const editButtons = Array.from(document.querySelectorAll("[data-open-edit]"));
     const panels = Array.from(document.querySelectorAll("[data-edit-panel]"));
 
     const openPanel = (id) => {
@@ -452,19 +451,26 @@ document.addEventListener("DOMContentLoaded", () => {
         panel.setAttribute("aria-hidden", "true");
     };
 
-    editButtons.forEach((button) => {
+    document.addEventListener("click", (event) => {
-        button.addEventListener("click", () => openPanel(button.dataset.openEdit));
+        const openTrigger = event.target.closest("[data-open-edit]");
-    });
+        if (openTrigger) {
-
+            event.preventDefault();
-    panels.forEach((panel) => {
+            openPanel(openTrigger.dataset.openEdit);
-        panel.addEventListener("click", (event) => {
+            return;
+        }
+        const closeTrigger = event.target.closest("[data-close-edit]");
+        if (closeTrigger) {
+            const panel = closeTrigger.closest("[data-edit-panel]");
+            if (panel) {
+                closePanel(panel);
+            }
+            return;
+        }
+        panels.forEach((panel) => {
             if (event.target === panel) {
                 closePanel(panel);
             }
         });
-        panel.querySelectorAll("[data-close-edit]").forEach((btn) => {
-            btn.addEventListener("click", () => closePanel(panel));
-        });
     });
 
     document.addEventListener("keydown", (event) => {