Fontawesome icons with jQuery don't seem to work with SVG layers

Question

I have the following bit of code I can run in the browser console that appears to work as expected with all of my Fontawesome icons like so:

jQuery(window).on('load', function () {
  $('.icon-wrapper').click(function() {
    $('.icon-wrapper').each(function(){
      $(this).find('a').removeClass('storyline-header-nav-active-color');
    });
    $(this).find('a').addClass('storyline-header-nav-active-color');
  });
});

However, when I am running this in the application, it works for these icons:

div[class="icon-wrapper fa-3x"]
        = link_to(@storyline_calendars_path, data: { "turbo-frame": "storyline-calendar-todos-org-detail-contents" }) do
          i[class="far fa-calendar-alt"]

but it does not work for these icons:

div[class="icon-wrapper fa-3x"]
        = link_to(@storyline_communications_contents_types_path_email, data: { "turbo-frame": "storyline-communications-contents" }) do
          span[class="fa-layers fa-fw"]
            i[class="fas fa-envelope-square"]
            span[class="fa-layers-counter fa-layers-top-right"]
              = @email

and my only guess here is one of them is using svg layers while the other is not. I have dug all over the net about this, and I am coming up blank. What can I try next?

Update

When I do not use layers for the counts, it works perfectly.

      div[class="icon-wrapper fa-3x"]
        = link_to(@storyline_communications_contents_types_path_email, data: { "turbo-frame": "storyline-communications-contents" }) do
          i[class="fas fa-envelope-square"]

Answer 1

I had to bind to the layers separately from the other wrapper as shown...

jQuery(window).on('load', function () {
  $('.icon-wrapper').click(function() {
    $('.icon-wrapper').each(function(){
      $(this).removeClass('storyline-header-nav-active-color');
    });
    $(this).addClass('storyline-header-nav-active-color');
  });

  $('.fa-layers ').click(function() {
    $('.fa-layers ').each(function(){
      $(this).removeClass('storyline-header-nav-active-color');
    });
    $(this).addClass('storyline-header-nav-active-color');
  });
});