How to combine two or more values within bootstrap table

First off, I'm not a professional. If I'm asking something silly I do apologise before hand. Currently I'm trying to combine two or more options via one button for the activity calender of our community center.As of now we have had 6 main categories;

• Iedereen (everyone)
• Peuters (todlers)
• Kinderen (children)
• Meiden (girls)
• Tieners (teens)
• Volwassenen (adults)

In the meantime our activities grew, and thus we added a couple of options;

• BSV Jeugd (youth sport)
• BSV Mannen (male sport)
• BSV Vrouwen (female sport)
• BSO (after school activities)

What I'm currently trying to do is to combine the options in a way similar to this;

• Iedereen =Iedereen
• Peuters =Peuters+Iedereen
• Kinderen =Kinderen+Iedereen+BSV Jeugd+BSO
• Meiden =Meiden+Iedereen+BSV Jeugd
• Tieners =Tieners+Iedereen+BSV Jeugd
• Volwassenen =Volwassenen+Iedereen+BSV Mannen+BSV Vrouwen

The current code looks like this;

div class="tabelmobiel">
    <table class="table mb-0">
       <thead>
          <tr class="collapse alert bg-0" id="collapse-options">
             <td class="btnactmob btnoranje">
                <center><a href="#" class="text-white sort-option" data-sort="Iedereen">Iedereen</a></center>
             </td>
             <td class="btnactmob btnrood">
                <center><a href="#" class="text-white sort-option" data-sort="Peuters">Peuters</a></center>
             </td>
             <td class="btnactmob btngroen">
                <center><a href="#" class="text-white sort-option" data-sort="Kinderen">Kinderen</a></center>
             </td>
             <td class="btnactmob btnroze">
                <center><a href="#" class="text-white sort-option" data-sort="Meiden">Meiden</a></center>
             </td>
             <td class="btnactmob btnblauw">
                <center><a href="#" class="text-white sort-option" data-sort="Tieners">Tieners</a></center>
             </td>
             <td class="btnactmob btnpaars">
                <center><a href="#" class="text-white sort-option" data-sort="Volwassenen">Volwassenen</a></center>
             </td>
             <td class="btnactmob btngroen">
                <center><a href="#" class="text-white sort-option" data-sort="Bsv-jeugd">BSV Jeugd</a></center>
             </td>
             <td class="btnactmob btnpaars">
                <center><a href="#" class="text-white sort-option" data-sort="Bsv-vrouwen">BSV Vrouwen</a></center>
             </td>
             <td class="btnactmob btnbruin">
                <center><a href="#" class="text-white sort-option" data-sort="Bsv-mannen">BSV Mannen</a></center>
             </td>
             <td class="btnactmob btngroen">
                <center><a href="#" class="text-white sort-option" data-sort="Bso">BSO</a></center>
             </td>
          </tr>
       </thead>
    </table>
    </div>

And the Js;

< script type = "text/javascript"
src = "//code.jquery.com/jquery-1.11.0.min.js" > < /script> <
  script >
  window.dataLayer = window.dataLayer || [];

function gtag() {
  dataLayer.push(arguments);
}

gtag('js', new Date());
gtag('config', 'UA-6966575-14'); <
/script>
<?php $post = get_post(get_queried_object_id()); ?>
<?php if (get_queried_object_id() == 64904): ?> <
script >
  $(document).ready(function() {
    $(".sort-option").click(function(e) {
      e.preventDefault();

      var sortIt = $(this).data('sort');
      $(".doelgroep-sort").addClass('d-none');
      $(".doelgroep-sort[data-doelgroep='" + sortIt + "']").removeClass('d-none');

      if (sortIt == 'Iedereen') {
        $(".doelgroep-sort").removeClass('d-none');
      }
    });
  }); <
/script>
<?php endif ?>
<?php if (isset($_GET['selectie'])): ?> <
script >
  $(document).ready(function() {
    var selectie = location.search.split('selectie=')[1];

    $(".sort-option[data-sort='" + selectie + "'").click();
  }); <
/script>
<?php endif ?> <
script type = "text/javascript" >
  //<![CDATA
  jQuery(document).ready(function($) {
    $('a').each(function() {
      var a = new RegExp('/' + window.location.host + '/');
      if (!a.test(this.href)) {
        $(this).click(function(event) {
          event.preventDefault();
          event.stopPropagation();
          window.open(this.href, '_blank');
        });
      }
    });
  });
//]]>
<
/script>

What I've already tried is to combine via comma seperation;

<td class="btnactmob btnrood">
   <center><a href="#" class="text-white sort-option" data-sort="Peuters", "Iedereen">Peuters</a></center>
</td>

I've tried to add a selection in the url;

/activiteiten?selectie=Peuters?selectie=Iedereen#

I've been searching for a while now, and I really have no clue how to make it work. The code is being used on our website: www.demussen.nl/activiteitenkalender and our web app www.demussen.nl/activiteiten Is there a way to do this in it's current format?