JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div class="ctrl">
	<ul>
		<li class="curr"><a href="#">all</a></li>
		<li><a href="#" rel="a">a</a></li>
		<li><a href="#" rel="b">b</a></li>
  </ul>
</div>

<div id="list">
	<div class="a">a</div>
	<div class="b">b</div>
  <div class="a">a</div>
	<div class="b">b</div>
</div>

CSS

.ctrl {margin-bottom: 10px;}
.ctrl, 
#list, 
#list > div {padding: 10px; border: 1px solid #000;}
.curr a {font-weight: bold;}
#list.a > div:not(.a),
#list.b > div:not(.b) {display: none;}

JavaScript

var ctrl = $('div.ctrl');
var new_ctrl = ctrl.clone(true);
var new_links = new_ctrl.find('a');

filter_class();

ctrl.find('a').click(function(e) {
	filter_curr($(this));
	e.preventDefault();
});

new_links.click(function(e) {
	filter_curr2($(this));
	e.preventDefault();
});

function filter_class() {
	var curr_link = ctrl.find('.curr a').attr('rel');
	$('#list').removeClass().addClass(curr_link);
};

function filter_class2() {
	var curr_link = new_ctrl.find('.curr a').attr('rel');
	$('#list').removeClass().addClass(curr_link);
};

function filter_curr(elem) {
	var curr_index = ctrl.find('li').removeClass('curr').end().find('a').filter(elem).parent().addClass('curr').index();
	new_ctrl.find('li').removeClass('curr').end().find('li').eq(curr_index).addClass('curr').index();
	filter_class();
};

function filter_curr2(elem) {
	var curr_index = new_ctrl.find('li').removeClass('curr').end().find('a').filter(elem).parent().addClass('curr').index();
	ctrl.find('li').removeClass('curr').end().find('li').eq(curr_index).addClass('curr');
	filter_class2();
};

$(document).on({
		mouseenter: function() {$(this).append(new_ctrl)},
		mouseleave: function() {new_ctrl.detach()}
	}, '#list > div');