jQuery .on() not triggering the desired function

Question

I have written some code to filter inside collections. But it doesn't trigger when the input clicked (checked with console.log )

Here's my code:

{% for collection in collections %}
  $('#collection-{{ collection.title | replace: " ", "" }}').on('click', function(event){
    showCollection('{{ collection.title | replace: " ", "" }}');
  });
{% endfor %}

Here's the HTML:

{% for collection in collections %}
   <li>
      <input type="radio" name="categoryCollection" id="collection-{{ collection.title | replace: " ", "" }}" value="{{ collection.title }}">
      <label for="collection-{{ collection.title | replace: " ", "" }}">{{ collection.title }}</label>
   </li>
{% endfor %}

What am I missing? Thanks!

EDIT: The logic which I'm using is liquid, because I'm creating a Shopify theme. Also, in the console everything works fine. I'll add here the rendered HTML:

<ul>
          
              
                <li>
                  <input type="radio" name="categoryCollection" id="collection-Jackets" value="Jackets">
                  <label for="collection-Jackets">Jackets</label>
                </li>
                <li>
                  <input type="radio" name="categoryCollection" id="collection-LuxuryTracksuits" value="Luxury Tracksuits">
                  <label for="collection-LuxuryTracksuits">Luxury Tracksuits</label>
                </li>
                <li>
                  <input type="radio" name="categoryCollection" id="collection-Masks" value="Masks">
                  <label for="collection-Masks">Masks</label>
                </li>
                <li>
                  <input type="radio" name="categoryCollection" id="collection-T-Shirts" value="T-Shirts">
                  <label for="collection-T-Shirts">T-Shirts</label>
                </li>
                <li>
                  <input type="radio" name="categoryCollection" id="collection-Trousers" value="Trousers">
                  <label for="collection-Trousers">Trousers</label>
                </li>
              
            </ul>

EDIT2: I created a working fiddle, that has only one problem: it works. Here you can see it

Answer 1

This can be made a lot more generic without needing a loop to create an event listener for each radio id.

Note the class added to each of the content elements in order to make hiding them generic also

Just take the value from the radio the event occurred on to filter out what you need to display

 $('.filter:radio[name="collection"]').change(function(){ const content_id = 'collection_' + this.value.toLowerCase(); $('.collection_content').hide().filter('#' + content_id).show(); });

 .collection_content{display:none}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="filter"> <ul> <li> <input type="radio" id="Jackets" value="Jackets" name="collection"> <label for="jackets" >Jackets</label> </li> <li> <input type="radio" id="Shirts" value="Shirts" name="collection"> <label for="Shirts">shirts</label> </li> <li> <input type="radio" id="Masks" value="Masks" name="collection"> <label for="Masks">Masks</label> </li> </ul> </div> <div class="collection-wrap"> <div id="collection_jackets" class="collection_content">JacketsJacketsJackets</div> <div id="collection_shirts" class="collection_content">ShirtsShirtsShirts</div> <div id="collection_masks" class="collection_content">MaksMaksMaks</div> </div>