JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/isotope.pkgd.min.js"></script>
<div class="wrapper">
  <div class="filters">

    <form role="form">

      <ul class="checkbox-list">

            <!-- checkbox -->
            <li class="checkbox">
              <label><input type="checkbox" class="checkbox-control" value=".food">Food</label>
            </li>
            <!-- checkbox : end -->

            <!-- checkbox -->
            <li class="checkbox">
              <label><input type="checkbox" class="checkbox-control" value=".medicine">Medicine</label>
            </li>
            <!-- checkbox : end -->

            <!-- checkbox -->
            <li class="checkbox">
              <label><input type="checkbox" class="checkbox-control" value=".toys">Toys</label>
            </li>
            <!-- checkbox : end -->

            <!-- clear -->
            <div class="button-container">
              <button class="clear clear-list">Clear</button>
            </div>
            <!-- clear : end -->

      </ul>


          <ul class="checkbox-list">

            <!-- checkbox -->
            <li class="checkbox">
              <label><input type="checkbox" class="checkbox-control" value=".kids">Kids</label>
            </li>
            <!-- checkbox : end -->

            <!-- checkbox -->
            <li class="checkbox">
              <label><input type="checkbox" class="checkbox-control" value=".grown-ups">Grown-ups</label>
            </li>
            <!-- checkbox : end -->

            <!-- clear -->
            <div class="button-container">
              <button class="clear clear-list">Clear</button>
            </div>
            <!-- clear : end -->

      </ul>



      <!-- clear-all -->
      <div class="button-container">
        <button class="clear clear-all">Clear All</button>
      </div>
      <!-- clear-all : end -->



    </form>


  </div>



  <ul...

CSS

button {
  background: black;
  color: white;
  border: 0;
  border-radius: 0;
  padding: 10px;
  cursor: pointer;
}

button:hover, button:focus {
  background: #f5f5f5;
  color: black;
}


img {
  width: auto;
  max-width: 100%;
  height: auto;
}

ul {
  list-style: none;
}

.checkbox-list {
  display: inline-block;
  margin: 0 15px 15px;
}

.clear-list {
  margin-top: 5px;
}

.clear-all {
  margin-top: 15px; 
}

.filters {
  padding: 15px;
  background-color: #eee;
  margin-bottom: 30px;
  
}

.grid-item {
  display: inline-block;
  margin: 5px;
  width: 200px;
  
}

JavaScript

function initIsotope(){
 
  var $wrapper = $('.wrapper');
   
  if($wrapper.length < 1){
  	return;
  }
 
 	var $filters = $('.filters', $wrapper);
  var $grid = $('.grid-container', $wrapper);
  var $checkboxList = $ ('.checkbox-list', $wrapper);
  var $checkboxes = $('.checkbox-control', $wrapper);
  var $clearList = $('.clear-list', $wrapper);
  var $clearAll= $('.clear-all', $wrapper);
  
  function removeItems(obj) {
  
  	var listCheckBoxes = obj.closest($checkboxList).find($checkboxes);
    var arr = []; 
    
    listCheckBoxes.each(function(){
    
    	arr.push(this.value);
      
    });
    
    arr = arr.join(', ');
    
    console.log(arr);
    
    $grid.isotope({
    	filter: '*:not('+ arr +')'
    });
    

  }
  
  //init Isotope
  $grid.isotope({
  		
  	  itemSelector: '.grid-item',
  		layoutMode: 'fitRows'
  
  });
  
  //isotope filtering on checkbox click
  // this part of code is from http://jsfiddle.net/desandro/DQydj/
   $checkboxes.change(function(){
   
    var filters = [];
    // get checked checkboxes values
    $checkboxes.filter(':checked').each(function(){
      filters.push( this.value );
    });
    
    filters = filters.join(', ');
    $grid.isotope({ filter: filters });
  });
  
  
  
  //clear list
  $clearList.on('click', function(e){
  	
    e.preventDefault();
    
    var $self = $(this);

    $self.closest($checkboxList).find($checkboxes).prop("checked", false);
    
    //Im stuck here
    removeItems($self);
    
  });
  
  
  
  
  //clear-all lists
  $clearAll.on('click',function(e){
  
  	e.preventDefault();
  	$checkboxes.prop("checked", false);
    
    $grid.isotope({ filter: '*' });
    
  });
  
  
  
}



$(function(){
	 initIsotope();
});