assets/js/wordgames-xletter.js in word-games-theme-2.3.3 vs assets/js/wordgames-xletter.js in word-games-theme-2.3.4

@@ -108,9 +108,77 @@
   }
 }
 
 
 
+const filterInputs = document.querySelectorAll('.filter_val');
+Array.from(filterInputs).forEach((item) => {
+    item.addEventListener("input", (e) => {
+        const inputValue = e.target.value;
+        const parentElement = e.target.parentElement;
+        const imgElement = parentElement.querySelector('img');
+        const tooltipElement = parentElement.querySelector('.filter-tooltip');
+
+        if (inputValue == "") {
+            imgElement.src = "/assets/images/questionmark.svg"
+            item.nextElementSibling.setAttribute("data-tip", item.nextElementSibling.id)
+            tooltipElement.style.setProperty('--tooltip-padding', '0.5rem');
+            tooltipElement.style.setProperty('--tooltip-border-style', 'soild');
+
+        } else {
+            item.nextElementSibling.removeAttribute("data-tip")
+            imgElement.src = "/assets/images/close-btn.svg"
+            tooltipElement.style.setProperty('--tooltip-padding', '0');
+            tooltipElement.style.setProperty('--tooltip-border-style', 'none');
+        }
+        item.nextElementSibling.addEventListener("click", () => {
+            e.target.value = ""
+            imgElement.src = "/assets/images/questionmark.svg"
+            item.nextElementSibling.setAttribute("data-tip", item.nextElementSibling.id)
+            tooltipElement.style.setProperty('--tooltip-padding', '0.5rem');
+            tooltipElement.style.setProperty('--tooltip-border-style', 'soild');
+        })
+    })
+})
+
+
+function handleFilterInput(e) {
+    const inputValue = e.target.value;
+    const parentElement = e.target.parentElement;
+    const imgElement = parentElement.querySelector('img');
+    const tooltipElement = parentElement.querySelector('.filter-tooltip');
+
+    if (inputValue == "") {
+        imgElement.src = "/assets/images/questionmark.svg"
+        e.target.nextElementSibling.setAttribute("data-tip", e.target.nextElementSibling.id)
+        tooltipElement.style.setProperty('--tooltip-padding', '0.5rem');
+        tooltipElement.style.setProperty('--tooltip-border-style', 'solid');
+    } else {
+        e.target.nextElementSibling.removeAttribute("data-tip")
+        imgElement.src = "/assets/images/close-btn.svg"
+        tooltipElement.style.setProperty('--tooltip-padding', '0');
+        tooltipElement.style.setProperty('--tooltip-border-style', 'none');
+    }
+
+    e.target.nextElementSibling.addEventListener("click", () => {
+        e.target.value = ""
+        imgElement.src = "/assets/images/questionmark.svg"
+        e.target.nextElementSibling.setAttribute("data-tip", e.target.nextElementSibling.id)
+        tooltipElement.style.setProperty('--tooltip-padding', '0.5rem');
+        tooltipElement.style.setProperty('--tooltip-border-style', 'solid');
+    });
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  const filterInputs = document.querySelectorAll('.filter_val');
+    Array.from(filterInputs).forEach((item) => {
+        // Call the function on load
+        handleFilterInput({ target: item });
+        item.addEventListener("input", handleFilterInput);
+    });
+});
+
+
 
 
 
 let letterCloseButton = document.querySelector('.letter-close-button-commonPage')
 if (serachValue) {