JSFiddle - React, Tailwind, and code Playground

by Robert N.

HTML

<div class="link"></div>
<ul>
  <li class="two three">2,3 one</li>
  <li class="two three">2,3 two</li>
  <li class="one two">1,3 one</li>
  <li class="two">2 one</li>
  <li class="two one">2,1 two</li>
  <li class="three">3 three</li>
</ul>

JavaScript

(function($){
	var uniqueclass = [];
  
  $('.link').prepend('<a href="#" class="all-click">all</a><br/>');
  
  $('ul li').each(function(){
  	var c = $(this).attr('class'), d = c.split(" "), i;
    for (i in d) {
    	if (uniqueclass.indexOf(d[i]) == -1) {
      	uniqueclass.push(d[i]);
        $('.link').prepend('<a href="#" class="' + d[i] + '-click">' + d[i] 				+ '</a><br/>');
      }
    }
  });
  
  $('.link a').on('click', function(){
  	$('li').show();
  	var e = $(this).html(), g = $('ul').find('li:contains(' + e + ')');
  	if (e != 'all'){
      $('li').hide();
      g.each(function() {
      	if ($(this).attr('class').indexOf(e) != -1) {
        	$(this).show();
        	return false;
        }
      });
    }
  });
})(jQuery);