JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="list-group-item ocfilter-option" id="option-m">
  <div class="ocf-option-name">
    Производитель
<input type="text" placeholder="Поиск..."><span>×</span>
		  </div>

  <div class="ocf-option-values">
    
        


<label id="v-m298" data-option-id="m">
  <input type="checkbox" name="ocf[m]" value="m:298" class="ocf-target" autocomplete="off">
 <span class="ocf-label-text">ACER</span>
    <small class="badge">18</small>
  </label>


<label id="v-m179" data-option-id="m">
  <input type="checkbox" name="ocf[m]" value="m:179" class="ocf-target" autocomplete="off">
 <span class="ocf-label-text">AKG</span>
    <small class="badge">4</small>
  </label>


<label id="v-m143" data-option-id="m">
  <input type="checkbox" name="ocf[m]" value="m:143" class="ocf-target" autocomplete="off">
 <span class="ocf-label-text">APPLE</span>
    <small class="badge">238</small>
  </label>

<div class="collapse" id="ocfilter-hidden-values-m" aria-expanded="false" style="height: 0px;">
  <hr style="margin:0 0 10px;">
    

<label id="v-m154" data-option-id="m">
  <input type="checkbox" name="ocf[m]" value="m:154" class="ocf-target" autocomplete="off">
 <span class="ocf-label-text">ASUS</span>
    <small class="badge">42</small>
  </label>
    

<label id="v-m180" data-option-id="m">
  <input type="checkbox" name="ocf[m]" value="m:180" class="ocf-target" autocomplete="off">
 <span class="ocf-label-text">Bang &amp; Olufsen</span>
    <small class="badge">38</small>
  </label>
    

<label id="v-m206" data-option-id="m">
  <input type="checkbox" name="ocf[m]" value="m:206" class="ocf-target" autocomplete="off">
 <span class="ocf-label-text">BEATS</span>
    <small class="badge">7</small>
 ...

CSS

.list-group-item {
    position: relative;
    display: block;
    padding: 30px 0 0;
    border-top: 1px solid #ececec;
    margin: 0 0 30px;
}
.ocfilter-option .ocf-option-name {
    font-weight: bold;
    font-size: 21px;
    line-height: 25px;
    margin-right: 8px;
}
.ocfilter-option .ocf-option-values {
    overflow: visible;
}
.ocf-option-values label {
    display: flex;
    cursor: pointer;
    align-items: center;
    border-radius: 6px;
    transition: all 0.2s;
    padding: 2px 8px;
    box-sizing: unset;
    margin: 0;
}
.collapse {
    display: none;
}

JavaScript

table = document.getElementById('option-m');
// Делегирование обработчика для полей ввода
table.addEventListener('input', fResultFilter);
// Назначение обработчиков для кнопок очистки
[...table.querySelectorAll('.header input + span')].forEach(function(el) {
  el.addEventListener('click', function(ev) {
    ev.target.previousElementSibling.value = '';
    ev.target.previousElementSibling.dispatchEvent(new Event('input', {
      bubbles: true
    }));
  });
});

function fResultFilter(ev) {
  // Скрытие/показ кнопок очистки
  ev.target.nextElementSibling.style.transform = (ev.target.value != '') ? 'scaleX(1)' : '';
  // Получаем все строки, кроме заголовка
  let aTRs = [...querySelectorAll('label)')];
  // Получаем значения всех полей поиска
  let aSearch = [...querySelectorAll('div > input')];
  // Прогоняем строки через цепочку фильтров
  aTRs.filter(function(el) {
    if (el.children[0].textContent.search(new RegExp(`${aSearch[0].value}`, 'i')) < 0) {
      el.style.display = 'none';
      return false;
    } else {
      return true;
    }
  }).filter(function(el) {
    if (el.children[1].textContent.search(new RegExp(`${aSearch[1].value}`, 'i')) < 0) {
      el.style.display = 'none';
      return false;
    } else {
      return true;
    }
  }).filter(function(el) {
    if (el.children[2].textContent.search(new RegExp(`${aSearch[2].value}`, 'i')) < 0) {
      el.style.display = 'none';
      return false;
    } else {
      // Показываем только нужные строки
      el.style.display = '';
      return true;
    }
  });
}