Добавление тегов по клику на чекбоксы из фильтров

Question

Имеется блок с фильтрами для товаров:

По клику на чекбокс, должен создаваться список тегов с отмеченными чекбоксами вида:

Проблема в том, что у меня эти теги дублируются, если в рамках одной категории выбрано несколько значений.

Вот код, как я это делаю (см. функцию createTagsFunc()). Линк на песочницу.

let filterForm = $('#catalogFilters');

function showSelectedFilters() {
  let filterGroup = filterForm.find('.form-group'),
      checkboxInput = filterForm.find('input[type="checkbox"]'),
      collectFilterArr = [];

  /* обработчик клика */
  function checkboxSelected() {
    checkboxInput.on('click', function() {
      collectFilterArr = [];
      collectFilterData();
      createTagsFunc();
    })
  }
  checkboxSelected();

  /* собираю данные по отмеченным чекбоксам */
  function collectFilterData() {
    filterGroup.each(function () {
      let valuesArr = [],
          idArr = [],
          checkedItems = $(this).find('input[type="checkbox"]:checked');

      if (checkedItems.length > 0) {
        checkedItems.each(function () {
          let values = $(this).closest('li').find('label').text().trim();

          valuesArr.push(values);
        });

        collectFilterArr.push({
          type: $(this).closest('.form-group').find('.title').text().trim(),
          value: valuesArr
        });
      }
    });
  }
  
  /* добавляю теги по клику на чекбокс */
  function createTagsFunc() {
    let btnText,
        btnValue,
        tagsContainer = $('.selected-filters_list');

    for (let i = 0; i < collectFilterArr.length; i++) {
      btnText = collectFilterArr[i]['type'];
      btnValue = collectFilterArr[i]['value'];
    }
    
    let btnTemplate = `<li><div class="selected-filter-tag"><span class="text">${btnText}:</span><span class="value">${btnValue}</span></div></li>`;
    tagsContainer.append(btnTemplate);
  }
}
showSelectedFilters();

ul {
  margin: 0 0 20px 0;
  padding: 0;
  list-style: none;
}

.title {
  margin-bottom: 10px;
}

.selected-filters_list {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% + 8px);
  margin: -4px;
}
.selected-filters_list li {
  padding: 4px;
}

.selected-filter-tag {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 15px;
  background: #d3d3d3;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="catalogFilters" class="filter-block content">
  <div class="form-group season">
    <div class="title">Сезон</div>
    <ul class="checkbox-list">
      <li>
        <input type="checkbox" id="seasonSummer">
        <label for="seasonSummer">Лето</label>
      </li>
      <li>
        <input type="checkbox" id="seasonWinter">
        <label for="seasonWinter">Зима</label>
      </li>
      <li>
        <input type="checkbox" id="seasonSpring">
        <label for="seasonSpring">Весна</label>
      </li>
    </ul>
  </div>
  <div class="form-group size">
    <div class="title">Размер</div>
    <ul class="checkbox-list">
      <li>
        <input type="checkbox" id="size18">
        <label for="size18">18</label>
      </li>
      <li>
        <input type="checkbox" id="size19">
        <label for="size19">19</label>
      </li>
      <li>
        <input type="checkbox" id="size20">
        <label for="size20">20</label>
      </li>
    </ul>
  </div>
</div>

<ul class="selected-filters_list">
  
</ul>

БЛОГ НА HUSL

Добавление тегов по клику на чекбоксы из фильтров

Ответы (0 шт):