JSFiddle - React, Tailwind, and code Playground
HTML
<ul class="store-list">
<li data-categories="Bags Shoes Accessories Belts">
<h3 itemprop="name">Enzo Poli</h3>
</li>
<li data-categories="Womenswear Shoes">
<h3 itemprop="name">Ilse Jacobsen</h3>
</li>
<li data-categories="Menswear Womenswear Shoes Ties">
<h3 itemprop="name">Kiman (Shoes Ties)</h3>
</li>
<li data-categories="Menswear Womenswear Shoes Knitwear">
<h3 itemprop="name">Riccovero</h3>
</li>
</ul>
<button class="a">Ties</button>
<button class="b">Ties & Shoes</button>
<button class="c">Menswear</button>
CSS
body {
font-size: 0.7em;
}
ul, li {
list-style: none;
}
a { text-decoration: none; }
JavaScript
var stores = $('.store-list');
$('button.a').on('click', function(){
stores.find('li').not('[data-categories!="Ties"]').fadeOut();
});
$('button.a').on('click', function(){
stores.find('li[data-categories!="Ties"][data-categories!="Shoes"]').fadeOut();
});
$('button.a').on('click', function(){
stores.find('li').not('[data-categories!="Menswear"]').fadeOut();
});