still trying to style checkboxes

luasrc/app.js

@@ -31,5 +31,34 @@
       },
       false
     );
-  })();
+    var checkboxes = document.querySelectorAll('.cbi-checkbox input[type="checkbox"]');
-  
+  
+    checkboxes.forEach(function(checkbox) {
+        var switchElement = document.createElement('label');
+        switchElement.className = 'switch';
+      
+        var input = document.createElement('input');
+        input.type = 'checkbox';
+        input.checked = checkbox.checked;
+        switchElement.appendChild(input);
+      
+        var slider = document.createElement('span');
+        slider.className = 'slider';
+        switchElement.appendChild(slider);
+      
+        // Add the switch to the div wrapping the checkbox
+        checkbox.parentNode.insertBefore(switchElement, checkbox);
+      
+        // Hide the original checkbox
+        checkbox.style.display = 'none';
+      
+        input.addEventListener('change', function() {
+            checkbox.checked = this.checked;
+        });
+      
+        var observer = new MutationObserver(function() {
+            input.checked = checkbox.checked;
+        });
+        observer.observe(checkbox, { attributes: true });
+    });  
+  })();

template/header.htm

@@ -60,43 +60,6 @@
 			<img src="<%=media%>/gaya/icons/arrow.svg" alt="">
 		</label>
 </div>
-<script>
-	{
-	document.addEventListener("DOMContentLoaded", function() {
-    var checkboxes = document.querySelectorAll('.cbi-checkbox input[type="checkbox"]');
-  
-    checkboxes.forEach(function(checkbox) {
-        var switchElement = document.createElement('label');
-        switchElement.className = 'switch';
-      
-        var input = document.createElement('input');
-        input.type = 'checkbox';
-        input.checked = checkbox.checked;
-        switchElement.appendChild(input);
-      
-        var slider = document.createElement('span');
-        slider.className = 'slider';
-        switchElement.appendChild(slider);
-      
-        // Add the switch to the div wrapping the checkbox
-        checkbox.parentNode.insertBefore(switchElement, checkbox);
-      
-        // Hide the original checkbox
-        checkbox.style.display = 'none';
-      
-        input.addEventListener('change', function() {
-            checkbox.checked = this.checked;
-        });
-      
-        var observer = new MutationObserver(function() {
-            input.checked = checkbox.checked;
-        });
-        observer.observe(checkbox, { attributes: true });
-    });  
-}); 
-});
-}
-</script>
 	<script>
 		document.addEventListener('DOMContentLoaded', (event) => {
     let checkboxes = document.querySelectorAll('input[type="checkbox"]');