Add wrappers surrounding Checkboxes facet choices for column styling

<?php
// Adds wrappers with class "column-wrapper" surrounding top-level 'facetwp-checkbox' elements and their following sibling 'facetwp-depth' elements, for column styling
// Replace 'myfacetname' with the name of your facet

add_action( 'facetwp_scripts', function() {
  ?>
  <script>
    document.addEventListener('facetwp-loaded', function() {

      // Get all top-level facetwp-checkbox elements
      var checkboxes = document.querySelectorAll('.facetwp-facet-myfacetname > .facetwp-checkbox');

      // Loop through each checkbox
      checkboxes.forEach(function(checkbox) {
          
        // Create a new div element for the wrapper
        var wrapper = document.createElement('div');
        wrapper.classList.add('column-wrapper');

        // Find the next sibling div with class facetwp-depth
        var depth = checkbox.nextElementSibling;

        // Append the wrapper before the current checkbox
        checkbox.parentNode.insertBefore(wrapper, checkbox);

        // Append the checkbox element to the wrapper
        wrapper.appendChild(checkbox);

        // Check if the depth element exists and has the class facetwp-depth
        if (depth && depth.classList.contains('facetwp-depth')) {

          // Append the depth element to the wrapper
          wrapper.appendChild(depth);
        }
      });
    });
  </script>
  <?php
}, 100 );