JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<ul class="clickableParent">
  <li data-tag="selectAll" class="clickable">all</li>
  <li data-tag="a" class="clickable">a</li>
  <li data-tag="b" class="clickable">b</li>
  <li data-tag="c" class="clickable">c</li>
</ul>

<h3 class="filter">
All elements
</h3>
<ul class="filterItemsParent">
  <li class="a item">first a</li>
  <li class="b item">second b</li>
  <li class="a b item">third a b</li>
  <li class="c item ">fourth c</li>
  <li class="c b item">fifth c b</li>
</ul>

CSS

.clickable:hover {
  cursor: pointer;
}

JavaScript

$(document).ready(function(){
	var filterItemsParent = $(".filterItemsParent");
  var clickableParent = $(".clickableParent");
	var filter = $(".filter");
  
  
  clickableParent.on("click", ".clickable", function () {
  	var self = $(this);
    var tag = self.data("tag");
    filter.text("Tag: " +  tag)
    console.log(tag)
    	tag = (tag !== "selectAll")? "." + tag : ".item";  
    	filterItemsParent.children().hide().end()
  			.children(tag).fadeIn();
  });
});