Updating text to match .length is always one behind

I have some fitlering being used on my site and I have a text block that I would like updated with the number of active filters so the user can always tell how many are applied even if the filters are closed.

The issue is, my count is always one behind either way. It's taking one more click to get the correct number.

I would assume the number is updating with the CURRENT number as opposed to updating AFTER the click has occured, but I can't wrap my brain around how to restructure to address that.

Here's my code:

let countFilter = 0;

function updateFilterCount() {
  let countFilter = $(".is-active").length;
  $(".caps.count").text(countFilter);
  if (countFilter > 0) {
    $(".filtered-text").addClass("active");
    $(".caps.all.active").removeClass("active");
  } else {
    $(".filtered-text.active").removeClass("active");
    $(".caps.all").addClass("active");
  }
}

updateFilterCount();

$(".fltr, .fltr-label, .filter_drawer, .button.ghost.filter__button.active").on(
  "click",
  function () {
    updateFilterCount();
  }
);

Your click event handler seems goes before your filters.
I would try to postpone it with setTimeout() first or make sure you filters add 'click' listeners before your counter.
Otherwise you need to know exact the handler's order execution and their events.
I would also use toggleClass() and you don't need to specify .active in your selector because you assign active class to all elements of .filtered-text or .caps.all.

function updateFilterCount() {
  const countFilter = $(".is-active").length;
  $(".caps.count").text(countFilter);
  $(".filtered-text").toggleClass('active', !!countFilter);
  $(".caps.all").toggleClass("active", !countFilter);
}

updateFilterCount();

$(".fltr, .fltr-label, .filter_drawer, .button.ghost.filter__button.active").on(
  "click", () => setTimeout(updateFilterCount)
);