Как заставить несколько тегов работать со списком, а не просто с раскрывающимся списком?

Question

Я использую фильтры для своих коллекций на Shopify. Я нашел код на GitHub, который является выпадающим фильтром, если вы выбираете несколько фильтров, он фильтрует продукты на основе вашего выбора.
Например, если я выберу дуб и диапазон цен от 15 до 100 фунтов стерлингов, это добавит к URL / дубу +15-100.
Однако, когда я изменяю код, чтобы он больше не был раскрывающимся списком, вместо этого список больше не работает. Если я выбираю несколько фильтров, он просто добавляет один фильтр, а не функциональность нескольких фильтров.

Это мой ликвидный код:

<div class="coll-sidebar">
<div class="coll-sidebar--content">
 <h1>Filter Products</h1>
 <ul class="subnav clearfix">
  <li class="coll-filter filter-heading clearfix">
   {% assign tags = 'Blue, Grey, Black, Oak, Bronze, Pewter, Gunmetal, Utile, Mahogany' | split: ',' %}
   <label>Colour</label>
   <hr class="hr--sidebar">
   {% for t in tags %}
   {% assign tag = t | strip %}
   {% if current_tags contains tag %}
    <li class="selection{% unless current_tag %} active{% endunless%}">
     <div id="swatch-{{ tag }}" class="colour-filter">&nbsp;</div> <span>{{ tag | link_to_remove_tag: tag }}</span>
    </li>
   {% elsif collection.all_tags contains tag %}
    <li class="selection{% unless current_tag %} active{% endunless%}">
     <div id="swatch-{{ tag }}" class="colour-filter">&nbsp;</div>
     <span> {{ tag | link_to_tag: tag }}</span>
    </li>
   {% endif %}
  {% endfor %}
 </li>
</ul>

<ul class="subnav clearfix">
 <li class="coll-filter filter-heading clearfix">
  {% assign tags = 'Egyptian Cotton, Silk, Satin' | split: ',' %}
  <label>Material</label>
  <hr class="hr--sidebar">
  {% for t in tags %}
  {% assign tag = t | strip %}
  {% if current_tags contains tag %}
   <li {% unless current_tag %}class="active"{% endunless%}>
    {{ tag | link_to_remove_tag: tag }}
   </li>
  {% elsif collection.all_tags contains tag %}
   <li>
    {{ tag | link_to_tag: tag }}
  </li>
 {% endif %}
{% endfor %}
    </li>
   </ul>
  </div>
 </div>

Выше повторяется для того, сколько фильтров у меня есть.

Это мой код jQuery:

<script>
 Shopify.queryParams = {};
 if (location.search.length) {
 for (var aKeyValue, i = 0, aCouples = location.search.substr(1).split('&'); 
 i < aCouples.length; i++) {
  aKeyValue = aCouples[i].split('=');
  if (aKeyValue.length > 1) {
    Shopify.queryParams[decodeURIComponent(aKeyValue[0])] = decodeURIComponent(aKeyValue[1]);
  }
 }
}
jQuery('.coll-picker').change(function() {
 if (jQuery(this).val()) {
   location.href = '/collections/' + jQuery(this).val();
 }
 else {
   location.href = '/collections/all';
 }
});
var collFilters = jQuery('.coll-filter');
collFilters.change(function() {
 delete Shopify.queryParams.page;
 var newTags = [];
 collFilters.each(function() {
   if (jQuery(this).val()) {
     newTags.push(jQuery(this).val());
   }
 });
 {% if collection.handle %}
 var newURL = '/collections/{{ collection.handle }}';
 if (newTags.length) {
   newURL += '/' + newTags.join('+');
 }
 var search = jQuery.param(Shopify.queryParams);
 if (search.length) {
   newURL += '?' + search;
 }
 location.href = newURL;
 {% else %}
 if (newTags.length) {
   Shopify.queryParams.constraint = newTags.join('+');
 }
 else {
   delete Shopify.queryParams.constraint;
 }
 location.search = jQuery.param(Shopify.queryParams);
 {% endif %}
 });
</script>