JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://wenzhixin.net.cn/p/multiple-select/assets/multiple-select/jquery.multiple.select.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.2/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.1.1/list.min.js"></script>
<div id="users">

		<!-- filter -->
    	<div class="sub_table_search">
		<input class="search" placeholder="Suche ..." />
		<select class="category1_s" multiple style="width:198px;" data-placeholder="Category 1" name="category1">
		</select>
		<select class="category2_s" multiple style="width:198px;" data-placeholder="Category 2" name="category2">
		</select>
		<select class="category3_s" multiple style="width:198px;" data-placeholder="Category 3" name="category3">
		</select>
		<select class="category4_s" multiple style="width:198px;" data-placeholder="Category 4" name="category4">
		</select>
        </div>
    
    
<fieldset>
    <label for="check1">
       <input type="checkbox" name="tim" value="Tim" data-cat="cat1" id="check1">
    Tim </label>     
    <label for="check2">
       <input type="checkbox" data-cat="cat4" name="france" value="France" id="check2">
    France </label>
    <label for="check3">
       <input type="checkbox" data-cat="cat2" name="house" value="House" id="check3">
    House </label>
</fieldset> 
    
    
        
        <p style="clear: both"></p><br>
        <div id="getSelectsBtn" class="reset">Reset Filter</div>
        <!-- /filter -->
        

    
        <!-- displayed data -->
		<ul class="list">
			<li>
            	<p class="date">04/03/2017</p>
				<p class="category1">Tom</p>
                <p class="category2">House</p>
                <p class="category3">Paris</p>
                <p class="category4">France</p>
            </li>
			<li>
            	<p class="date">04/03/2016</p>
				<p class="category1">Tim</p>
                <p class="category2">House</p>
                <p class="category3">Paris</p>
               ...

CSS

.list {
  margin:0;
  padding:20px 0 0;}
  
.list > li {
	position:relative;
	float:left;
  	display:block;
	width:49%;
    background: #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
	box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    margin: 1% 0.5%;
	padding:25px;
    overflow: hidden;
    text-align: left;
	min-height:206px;}

.reset {
    cursor: pointer}

input.search {
    width:100%;}

.ms-parent {
    display: inline-block;
    position: relative;
    vertical-align: middle;
	width:25%;
	float:left;
}

.ms-choice {
	font-size:15px;
    display: block;
  	padding:16px 0px 22px 0px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid #ededed;
    text-align: left;
    white-space: nowrap;
    line-height: 44px;
    color: #303030;
    text-decoration: none;
	border-radius:4px;
    background-color: transparent;
	width:100% !important;
}

.ms-drop {
    width: 99% !important;
}

.ms-choice.disabled {
    background-color: #f4f4f4;
    background-image: none;
    border: 1px solid #ddd;
    cursor: default;
}

.ms-choice > span {
    position: absolute;
    top: 0;
    left: 10px;
    right: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    padding-left: 8px;
}

.ms-choice > span.placeholder {
    color: #999;
}

.ms-drop {
    overflow: hidden;
    display: none;
    margin-top: -1px;
    padding: 0;
    position: absolute;
    z-index: 1000;
    background: #fff;
    color: #000;
    border: 1px solid #aaa;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.ms-drop.bottom {
    top: 100%;
    -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
    -moz-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
    box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
}

.ms-drop.top {
    bottom: 100%;
    -webkit-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
    -moz-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
    box-shadow: 0 -4px 5px...

JavaScript

// multifilters for hide and display li elements
var options = { valueNames: [ 'category1', 'category2', 'category3', 'category4' ] };
var userList = new List('users', options);
 
var testList = function(){
    console.info(userList)
updateList();
     $('.list li').sort(sortDescending).appendTo('.list');
}
var updateList = function(){
    
  var values1 = $(':checkbox:checked[data-cat=cat1]').map(function(){ return $(this).val();}).get().join() ;
    var values2 = $(':checkbox:checked[data-cat=cat2]').map(function(){ return $(this).val();}).get().join() ;
    var values3 = $(':checkbox:checked[data-cat=cat3]').map(function(){ return $(this).val();}).get().join() ;
    var values4 = $(':checkbox:checked[data-cat=cat4]').map(function(){ return $(this).val();}).get().join() ;
    
  var values_category1 = $(".category1_s").val()
  var values_category2 = $(".category2_s").val()
  var values_category3 = $(".category3_s").val()
  var values_category4 = $(".category4_s").val()
  
  
  
  userList.filter(function(item) {
    return (_(values_category1).contains(item.values().category1) || !values_category1) 
           && (_(values_category2).contains(item.values().category2) || !values_category2)
		   && (_(values_category3).contains(item.values().category3) || !values_category3)
		   && (_(values_category4).contains(item.values().category4) || !values_category4)
      && (_(values1).contains(item.values().category1) || !values1)
      && (_(values2).contains(item.values().category2) || !values2)
      && (_(values3).contains(item.values().category3) || !values3)
      && (_(values4).contains(item.values().category4) || !values4)
  
  });
   // console.info(fresult)
 
}
                               
$(function(){
  testList();
  $(".category1_s").change(testList);
  $(".category2_s").change(testList);
  $(".category3_s").change(testList);
  $(".category4_s").change(testList);
  $("#check1,#check2,#check3").change(testList);
      
  
  var all_category1 = [];
  var...