still trying to style checkboxes

template/header.htm

@@ -62,46 +62,39 @@
 </div>
 <script>
 	{
-// Function to run when the DOM is fully loaded
+	document.addEventListener("DOMContentLoaded", function() {
-document.addEventListener("DOMContentLoaded", function() {
+    var checkboxes = document.querySelectorAll('.cbi-checkbox input[type="checkbox"]');
-    // Find all checkboxes
-    var checkboxes = document.querySelectorAll('input[type="checkbox"]');
   
-    // Loop over each checkbox
     checkboxes.forEach(function(checkbox) {
-        // Create the switch
         var switchElement = document.createElement('label');
         switchElement.className = 'switch';
       
-        // Create the input for the switch
         var input = document.createElement('input');
         input.type = 'checkbox';
         input.checked = checkbox.checked;
         switchElement.appendChild(input);
       
-        // Create the slider for the switch
         var slider = document.createElement('span');
         slider.className = 'slider';
         switchElement.appendChild(slider);
       
-        // Add the switch to the page
+        // Add the switch to the div wrapping the checkbox
-        checkbox.parentNode.insertBefore(switchElement, checkbox.nextSibling);
+        checkbox.parentNode.insertBefore(switchElement, checkbox);
       
         // Hide the original checkbox
         checkbox.style.display = 'none';
       
-        // When the switch is clicked, update the checkbox
         input.addEventListener('change', function() {
             checkbox.checked = this.checked;
         });
       
-        // When the checkbox is updated (e.g. by JavaScript), update the switch
         var observer = new MutationObserver(function() {
             input.checked = checkbox.checked;
         });
         observer.observe(checkbox, { attributes: true });
     });  
 }); 
+});
 }
 </script>
 	<script>