consider the filtering script below. When I use it, everything works fine, but on page load no items in the target list are displayed. Any filter change triggers the list to display. My question is, based on the code provided, what is causing the problem and how do we fix it.

Filtering script:
$(document).ready(function () {
  const applyFilter = () => {
    const activeRegistrarFilters = $(".registrar-toggle.active")
      .map(function () {
        return $(this).text();
      })
      .get();

    const activeTldFilters = $(".tld-toggle.active")
      .map(function () {
        return $(this).text();
      })
      .get();

    const rangeSlider = document.getElementById("range-slider");
    const sliderValues = rangeSlider.noUiSlider.get();
    const minLength = parseInt(sliderValues[0]);
    const maxLength = parseInt(sliderValues[1]);

    $(".domitem-template").each(function () {
      const itemRegistrar = $(this).find(".domitem-registrar").text();
      const itemTld = $(this).find(".tld").text();
      const itemLetters = parseInt($(this).find(".domitem-letters").text());

      if (
        (activeRegistrarFilters.includes("All") ||
          activeRegistrarFilters.includes(itemRegistrar)) &&
        (activeTldFilters.includes("All") ||
          activeTldFilters.includes(itemTld)) &&
        itemLetters >= minLength &&
        itemLetters <= maxLength
      ) {
        $(this).show();
      } else {
        $(this).hide();
      }
    });
  };

  $("body").on("click", ".registrar-toggle, .tld-toggl You should write your response with 600 or more words.
user