Alert Messages: Close (X) button not working, check the code

index.html

@@ -21,13 +21,12 @@
       <i data-feather="alert-triangle" class="w-5 h-5 text-red-600 mr-2"></i>
       <span class="font-medium text-red-800">Error</span>
     </div>
-
     <!-- CLOSE BUTTON -->
-    <button type="button"
-      class="close-alert ml-auto p-2 rounded hover:bg-red-100">
-      <i data-feather="x" class="w-4 h-4 pointer-events-none"></i>
+    <button type="button" onclick="removeQuery()"
+      class="close-alert ml-auto p-2 rounded hover:bg-red-100 focus:outline-none">
+      <i data-feather="x" class="w-4 h-4"></i>
     </button>
-  </div>
+</div>
 
   <div class="p-4 text-red-700">
     <p>Could not send an email! Please try again later.</p>
@@ -46,13 +45,12 @@
       <i data-feather="check-circle" class="w-5 h-5 text-green-600 mr-2"></i>
       <span class="font-medium text-green-800">Success</span>
     </div>
-
     <!-- CLOSE BUTTON -->
-    <button type="button"
-      class="close-alert ml-auto p-2 rounded hover:bg-green-100">
-      <i data-feather="x" class="w-4 h-4 pointer-events-none"></i>
+    <button type="button" onclick="removeQuery()"
+      class="close-alert ml-auto p-2 rounded hover:bg-green-100 focus:outline-none">
+      <i data-feather="x" class="w-4 h-4"></i>
     </button>
-  </div>
+</div>
 
   <div class="p-4 text-green-700">
     <p>
@@ -402,17 +400,8 @@ document.addEventListener("DOMContentLoaded", function () {
   if (params.get("email") === "fail") {
     failAlert.classList.remove("hidden");
   }
-
-  // Close button logic
-  document.querySelectorAll(".close-alert").forEach(btn => {
-    btn.addEventListener("click", () => {
-      successAlert.classList.add("hidden");
-      failAlert.classList.add("hidden");
-      removeQuery();
-    });
-  });
-
-  // Feather icons render
+  // Close button logic - moved to inline onclick handlers
+// Feather icons render
   if (window.feather) {
     feather.replace();
   }