jQuery toggleClass not toggling class - it does on other identical elements

Question

My (restricted) code works in a sandbox (below), and 6/7 elements with the same code structure work in the wild, however, the last element on the live website (in mobile view) will not toggle its submenu open:

The element is in the footer.

There are no console errors, and the code is identical for the other elements, e.g. Company, Product etc...

Help appreciated.

$($ => {
    $("footer .fl-module-heading").on("click", showSubMenu);
})

function showSubMenu() {
  const $headerAll = $("footer .fl-col-content").find(".fl-module-heading");
  const $header = $(this);
  const $menuAll = $("footer .fl-col-content").find(".footer-text-links");
  const $menu = $(this).next();
  $headerAll.not($header).removeClass("up-arrow");
  $header.toggleClass("up-arrow");
  $menuAll.not($menu).addClass("hide-block");
  $menu.toggleClass("hide-block");
}

    .hide-block {display: none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<footer>
  <div id="ftr-hdr-resources" class="fl-module fl-module-heading fl-node-42nz5yakdp10" data-node="42nz5yakdp10">
    <div class="fl-module-content fl-node-content geot-module">
      <h4 class="fl-heading">
      <span class="fl-heading-text">Resources</span>
    </h4>
    </div>
  </div>
  <div id="ftr-menu-resources" class="fl-module fl-module-menu fl-node-pxj8u5qi32ra footer-text-links hide-block" data-node="pxj8u5qi32ra">
    <div class="fl-module-content fl-node-content geot-module">
      <div class="fl-menu">
      <div class="fl-clear"></div>
        <nav aria-label="Menu" itemscope="itemscope" itemtype="https://schema.org/SiteNavigationElement">
          <ul id="menu-footer-resources-new" class="menu fl-menu-horizontal fl-toggle-none">
            <li id="menu-item-20536" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://mandoestage.wpengine.com/blog/">Blog</a></li>
            <li id="menu-item-20534" class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="https://mandoestage.wpengine.com/blog/topic/case-studies/">Case Studies</a></li>
            <li id="menu-item-20537" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="https://help.mandoemedia.com">Help Centre</a></li>
            <li id="menu-item-20535" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://mandoestage.wpengine.com/about-us/">About</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
  <div id="ftr-hdr-support" class="fl-module fl-module-heading fl-node-i97aup4mj6wx" data-node="i97aup4mj6wx">
    <div class="fl-module-content fl-node-content geot-module">
      <h4 class="fl-heading">
        <span class="fl-heading-text">Support</span>
      </h4>
    </div>
  </div>
  <div id="ftr-menu-support" class="fl-module fl-module-rich-text fl-node-pse70yr5j6cd footer-text-links hide-block" data-node="pse70yr5j6cd">
    <div class="fl-module-content fl-node-content geot-module">
      <div class="fl-rich-text">
        <p><a href="tel:1800 905 495">1800 905 495</a></p>
        <p><a href="/contact/support/">Email Support</a></p>
      </div>
    </div>
  </div>
</footer>

EDIT: I've updated the code to work with classes more efficiently.

What I can't replicate in the sandbox is the geo-functionality.

If you visit the live website while connected to an Australian VPN, in a mobile view you will see the Contact header doesn't expand its submenu. This Contact header appears about 1 second after the other headers. From Jonas' answer, I'm using .on, but this is still not working for the Contact heading.

Help appreciated.

Answer 1

Since the 'Support' entry is managed by your geo-targeting, it is added to the DOM after jQuery binds the click event.

Use on()to bind the click event, then it should work.

https://api.jquery.com/on/