From 1b3dfad81e322095674a22040646a0f17d51770c Mon Sep 17 00:00:00 2001
From: Landon Taylor <landon@mossbiscuits.com>
Date: Thu, 21 Aug 2025 17:34:44 -0600
Subject: [PATCH] Fix listeners

---
 new-tool.md | 29 +++++++++++++++++------------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/new-tool.md b/new-tool.md
index 3f97c6c..c2cc000 100644
--- a/new-tool.md
+++ b/new-tool.md
@@ -172,14 +172,17 @@ date = ${date}
             <!-- <label for="other-applications">Other:</label> -->
             <input type="text" id="other-applications" placeholder="Other application">
             <script>
-            document.getElementById('other-applications').addEventListener('input', function() {
-                const otherValue = this.value.trim();
-                const checkboxes = Array.from(document.querySelectorAll('#applications-checkboxes input[type="checkbox"]:checked'))
-                    .map(cb => cb.value);
+            document.getElementById('other-applications').addEventListener('input', updateApplications);
+            Array.from(document.querySelectorAll('#applications-checkboxes input[type="checkbox"]')).forEach(cb => {
+                cb.addEventListener('change', updateApplications);
+            });
+            function updateApplications() {
+                const otherValue = document.getElementById('other-applications').value.trim();
+                const checkboxes = Array.from(document.querySelectorAll('#applications-checkboxes input[type="checkbox"]:checked')).map(cb => cb.value);
                 const applications = otherValue ? [...checkboxes, otherValue] : checkboxes;
                 document.getElementById('applications').value = applications.join(', ');
-            });
-            </script>
+            }
+            </script>    </script>
             <input type="hidden" id="applications">
         </div>
     </td>
@@ -343,14 +346,16 @@ function getCheckedApplications() {
             <!-- <label for="other-interfaces">Other:</label> -->
             <input type="text" id="other-interfaces" placeholder="Other interface(s), separated by commas">
             <script>
-            document.getElementById('other-interfaces').addEventListener('input', function() {
-                const otherValues = this.value.split(',').map(s => s.trim()).filter(Boolean);
-                const checkboxes = Array.from(document.querySelectorAll('#interfaces-checkboxes input[type="checkbox"]:checked'))
-                    .map(cb => cb.value);
+            document.getElementById('other-interfaces').addEventListener('input', updateInterfaces);
+            Array.from(document.querySelectorAll('#interfaces-checkboxes input[type="checkbox"]')).forEach(cb => {
+                cb.addEventListener('change', updateInterfaces);
+            });
+            function updateInterfaces() {
+                const otherValues = document.getElementById('other-interfaces').value.split(',').map(s => s.trim()).filter(Boolean);
+                const checkboxes = Array.from(document.querySelectorAll('#interfaces-checkboxes input[type="checkbox"]:checked')).map(cb => cb.value);
                 const interfaces = otherValues.length ? [...checkboxes, ...otherValues] : checkboxes;
                 document.getElementById('interfaces').value = interfaces.join(', ');
-            });
-            </script>
+            }    </script>
             <input type="hidden" id="interfaces">    </div>
     </td>
     <script>