JSFiddle - React, Tailwind, and code Playground

by fxi

HTML

<div class="row">
        <div id="search-results">
            Sort by:
            <button class="sort btn" data-sort="name">
                Name <i class="fa fa-fw"></i>
            </button>
            <button class="sort btn" data-sort="date">
               Departures <i class="fa fa-fw"></i>
            </button>
            <button class="sort btn" data-sort="difficulty">
               Difficulty <i class="fa fa-fw"></i>
            </button>

            Filter:
            <label for="easy">Easy</label>
            <input type="checkbox" name="easy" class="filter" data-value="Easy" />
            <label for="moderate">Moderate</label>
            <input type="checkbox" name="moderate" class="filter" data-value="Moderate" />
            <label for="challenging">Challenging</label>
            <input type="checkbox" name="challenging" class="filter" data-value="Challenging" />
            
            <div class="list">
                    <div class="package">
                        <span class="name">Northern Lights</span><br />
                        <span class="date"><strong>5 departures available</strong></span><br />
                        <span class="difficulty">Easy</span>
                    </div>
                    <div class="package">
                        <span class="name">Blue Lagoon swim</span><br />
                        <span class="date"><strong>15 departures available</strong></span><br />
                        <span class="difficulty">Moderate</span>
                    </div>
                     <div class="package">
                        <span class="name">Hiking up mountain</span><br />
                        <span class="date"><strong>8 departures available</strong></span><br />
                        <span class="difficulty">Challenging</span>
                    </div>               
            </div>
        </div>
</div>

<script...

CSS

.view {
    border: 1px solid #ccc;
    margin: 10px;
    padding: 10px;
}

JavaScript

$(function() {
	var options = {
		valueNames: ['name', 'date', 'difficulty' ]
	};

	var userList = new List('search-results', options);
	var activeFilters = [];



    //filter
    $('.filter').change(function() {
        var isChecked = this.checked;
        var value = $(this).data("value");
      
		if(isChecked){
			//  add to list of active filters
			activeFilters.push(value);
		}
		else
		{
			// remove from active filters
			activeFilters.splice(activeFilters.indexOf(value), 1);
		}
		
		userList.filter(function (item) {
			if(activeFilters.length > 0)
			{
				return(activeFilters.indexOf(item.values().difficulty)) > -1;
			}
			return true;
		});
     });
    
});