Dynamically passing value to .click event Jquery

I am getting the values of a CSS class using Jquery. When I click the header, I want all of the radio boxes to be marked as checked. I loop through and find the values, using console.log to check if I am returning the correct values which I am. However when I try to use the function, it will only run it correctly on the first element in the array, where I would like it to apply to all names found in the loop.

var skil = $('.Routes');
var skills = new Array();
skil.each(function(i) {
  skills.push($(this).text());
  var Route = '#'+skills[i].replaceAll(' ','');
  console.log(Route);
   $(Route).on('click', function() {
    $(Route).prop("checked", true); //This only performs the function on the First value (in this case for "Purchased")
   });
});

Below is an extract of code which runs correctly on both headers. I could replicate this, but there are 17 classes, so ideally I would like to dynamically pass the value in and run through one function if possible.

$('#Purchased').on('click', function() {
    $('.Purchased').prop("checked", true);
});

$('#BST').on('click', function() {
    $('BST').prop("checked", true);
});

See HTML to build table below

<th class="rotate"><div><span class ="Routes" id ="Purchased"> Purchased</span></div></th>
    <th class="rotate"><div><span class ="Routes" id ="BST> BST</span></div></th>

<td bgcolor="#8DB255" class=""> <input type="radio" class="get_value Purchased" name="48215:4G1" id="r8215:4201" value="4:716:597:18.25:200:0:200:NA:PBJB_18223_JTC:375:8215:4:20:2023/09/13:284:284:284:284:284:0::0" checked=""></td>
    <td bgcolor="#8DB255" class=""> <input type="radio" class="get_value BST" name="48215:4G1" id="r8215:4201" value="4:716:597:18.25:200:0:200:NA:PBJB_18223_JTC:375:8215:4:20:2023/09/13:284:284:284:284:284:0::0" checked=""></td>