JSFiddle - React, Tailwind, and code Playground

HTML

<div class="filter-control">
  <ul data-filter="city1">
    <li><a href="#">Chicago</a></li>
    <li><a href="#">Houston</a></li>
    <li><a href="#">Dallas</a></li>
  </ul>

  <ul data-filter="city2">
    <li><a href="#">Chicago</a></li>
    <li><a href="#">Houston</a></li>
    <li><a href="#">Dallas</a></li>
  </ul>

  <ul data-filter="product">
    <li><a href="#">beer</a></li>
    <li><a href="#">whiskey</a></li>
  </ul>
</div>

<div class="filteredblock">
  <div class="Chicago Houston beer"></div>
  <div class="Chicago Houston whiskey"></div>
  <div class="Chicago Dallas beer"></div>
  <div class="Chicago Dallas whiskey"></div>
  <div class="Houston Chicago beer"></div>
  <div class="Houston Chicago whiskey"></div>
  <div class="Houston Dallas beer"></div>
  <div class="Houston Dallas whiskey"></div>
  <div class="Dallas Chicago beer"></div>
  <div class="Dallas Chicago whiskey"></div>
  <div class="Dallas Houston beer"></div>
  <div class="Dallas Houston whiskey"></div>
</div>

CSS

.active {
  background: red;
}
.active a {
  color: white;
}

.hidden {
  display: none;
}

JavaScript

document.querySelector('.filter-control').addEventListener('click', e => {
  const li = e.target.closest('li');
  if (li) {
    const isActive = li.classList.contains('active');
    [...li.parentNode.children].forEach(n => n.classList.toggle('active', n === li && !isActive));

    const filters = [...document.querySelectorAll('.filter-control .active')].map(n => ({
      name: n.closest('ul').dataset.filter,
      value: n.textContent,
    }));

    document.querySelectorAll('.filteredblock > div').forEach(n => {
      n.classList.toggle('hidden', filters.some(f => n.dataset[f.name] !== f.value));
    });
  }
});











document.querySelectorAll('.filteredblock > div').forEach(n => {
  n.textContent = n.className;
  const [ c1, c2, p ] = n.className.split(' ');
  Object.assign(n.dataset, {
    city1: c1,
    city2: c2,
    product: p
  });
});