JSFiddle - React, Tailwind, and code Playground

by josekerekes

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<ul id="filter">
  <li><a href="#!" data-target="people" data-filter-index="1">People</a></li>
  <li><a href="#!" data-target="animals" data-filter-index="2">Animals</a></li>
  <li class="active"><a href="#!" data-target="object" data-filter-index="3">Objects</a></li>
</ul>

<ul class="target" id="target">
  <li data-category="people" data-order-f1="1">Johny</li>
  <li data-category="animals" data-order-f2="1">frog</li>
  <li data-category="people" data-order-f1="0">Mariuca</li>
    <li data-category="people animals" data-order-f1="2" data-order-f2="0">Bula</li>
  <li data-category="object" data-order-f3="1">Car</li>
  <li data-category="object" data-order-f3="0">Ball</li>
  <li data-category="object" data-order-f3="4">Gadget</li>
  <li data-category="object" data-order-f3="3">Pc</li> 
</ul>


</ul>

CSS

.target li {float:left;width:100px;height:100px;margin:10px;background:brown;list-style:none;text-align:center;line-height:100px;color:#fff}
#filter .active {font-weight:bold}

JavaScript

var activeFilter = $('#filter .active a').data('target');
var targetLi = $('#target li')

$('#target li').filter(function() {
	var arr = $(this).data('category').split(" ");
  var isExist = $.inArray( activeFilter, arr );
  return isExist == -1  
}).hide();

$('#filter a').click(function() {
	var target = $(this).data("target");
  var index = $(this).data("filter-index");
  
  $(this).parent().addClass('active').siblings().removeClass('active');
  $('#target li').hide();
  
  var list = targetLi.filter(function() {
    var arr = /\s+/.test($(this).data('category')) ? $(this).data('category').split(" ") : [$(this).data('category')];
    var isExist = $.inArray( target, arr );
    return isExist != -1  
	}).show();
   
  
  var order = list.sort(function(a, b) {
  	var nr1 = $(a).data('order-f'+index);
    var nr2 = $(b).data('order-f'+index);
		 
    return parseInt(nr1) - parseInt(nr2);
  });

  var filtered = '';
  for (var i = 0; i < order.length; i++) {
    filtered += '<li>' + $(order[i]).text() + '</li>';
  }

  $('#target').html(filtered);
  
});