Calculate active filters and insert it in an attribute with jQuery

I am using FacetWP on Wordpress and this jQuery snippet to indicate if a facet is active:

(function($) {
  $(document).on('facetwp-loaded', function() {
    $.each(FWP.facets, function(name, vals) {
      if (FWP.facets[name].length > 0) {
        $('.facetwp-facet-' + name).parent().addClass('is-active');
      }
      else {
        $('.facetwp-facet-' + name).parent().removeClass('is-active');
      }
    });
  });
})(jQuery);

CSS:

.facet-wrap.is-active h3.facet-label::after {
    content: "Active";
}

HTML looks like this:

<div class="facet-wrap is-active">
    <h3 class="facet-label">Color</h3>
    <div class="facetwp-facet facetwp-facet-color facetwp-type-checkboxes">
        <div class="facetwp-checkbox checked" data-value="green">Green</div>
        <div class="facetwp-checkbox checked" data-value="black">Black</div>
        <div class="facetwp-checkbox" data-value="yellow">Yellow</div>
        <div class="facetwp-checkbox" data-value="orange">Orange</div>
    </div>
</div>

How to improve this jQuery snippet to calculate how many are active and insert that number in an "active-checked" attribute at heading H3 of each facet?

So that I can display it like this:

h3.facet-label::after {
  content: attr(active-checked);
  margin-left: 8px;
  color: red;
}

<h3 class="facet-label" active-checked="2">Color</h3>

This question has not been answered, I share with you what I achieved:

(function($) {
    document.addEventListener('facetwp-loaded', function() {
        $.each(FWP.facets, function(name, val) {
            var length = $('.facetwp-facet-' + name).children('.checked').length;
            if (length > 0) {
                $('.facet-wrap .facetwp-facet-' + name).parent().attr('active-checked', length);
            } else {
                $('.facet-wrap .facetwp-facet-' + name).parent().removeAttr('active-checked');
            }
        });
    });
})(jQuery);

Simply.