fSelect facet modify option labels HTML

<?php
// This example adds a <span> with class "facetwp-counter" around the counts in each option
// With node.getAttribute() you have access to all attributes of each <option>. 
// You can use these to do something with in the HTML of the option label. 
// Available attributes are: value, data-counter, class, and label. 
// The data-counter attribute contains the current count of that option, as used in this example.
// The class attribute has classes like d0, d1, d2 etc. These correspond with the option’s “depth” in the hierarchy, if you are using a hierarchical data source and the “Hierarchical” setting is enabled. 
// More info: https://facetwp.com/help-center/facets/facet-types/fselect/#customize-the-fselect-options-html


add_action( 'wp_head', function() {
    ?>
    <script>
    document.addEventListener('DOMContentLoaded', function () {
        if ( 'undefined' !== typeof FWP && 'undefined' !== typeof FWP.hooks) {
            FWP.hooks.addFilter('facetwp/set_options/fselect', function(opts, facet) {
                if (facet.facet_name == 'categories') {
                    opts.optionFormatter = function(label, node) {
                        var counter = node.getAttribute('data-counter');
                        return (counter) ? label + ' <span class="facetwp-counter">' + counter + '</span>' : label;
                    };
                    return opts;
                }
            });
        }
    });
    </script>
    <?php
}, 100);