JSFiddle - React, Tailwind, and code Playground

by LyndseyB

HTML

<div class="row align-center align-middle collapse module__filters" data-filter-element="js-types" data-gunner-js="Filters">
		    <div class="columns small-6 medium-2 large-1">
			    <h5>Filter by:</h5>
			</div>
		    <div class="columns small-12 medium-2">
			    <select class="filters__list" data-sel="do"><option value="spend-quality-time-with-family-and-friends">Spend quality time with family and friends</option><option value="to-celebrate-a-special-event-or-person">To celebrate a special event or person</option><option value="to-see-more-of-the-world">To see more of the world</option><option value="to-engage-with-traditional-cultures">To engage with traditional cultures</option><option value="to-relax-and-recharge">To relax and recharge</option><option value="to-spend-time-with-wildlife-and-nature">To spend time with wildlife and nature</option><option value="for-adventure-and-exploration">For adventure and exploration</option></select>			</div>
			<div class="columns small-12 medium-2">
				<select class="filters__list" data-sel="seasons"><option value="january">January</option><option value="february">February</option><option value="march">March</option><option value="may">May</option><option value="july">July</option><option value="august">August</option><option value="september">September</option><option value="november">November</option><option value="october">October</option><option value="december">December</option><option value="april">April</option><option value="june">June</option></select>
	        </div>
		    <div class="columns small-12 medium-2">
			    <select class="filters__list" data-sel="countries"><option value="zimbabwe">Zimbabwe</option><option value="namibia">Namibia</option><option value="kenya">Kenya</option><option value="democratic-republic-of-congo">Democratic Republic of Congo</option><option value="botswana">Botswana</option><option value="sudan-north">Sudan (North)</option></select>			</div>	        
	    </div>
      
     ...

CSS

li.hide {
  display: none;
}

JavaScript

var filtered = {};
var joined = '';
var li = $('li');
var minCount = $('.module__filters select').length;

$('.filters__list').on('change', function(e) {  
	var $this = $(this);
	var $val = $this.val();
  var $sel = $this.data('sel');  
 
  filtered[$sel] = $val || {}; 
  
  joined = Object.keys(filtered).reduce(function(acc, filter) {
  	acc.push(filter + '-' + filtered[filter]);
  	return acc;
  }, []);
   
  li.each(function(index, list) {
   	var hasAllClasses = joined.every(function(item) {
    	return list.classList.contains(item);
    }) && joined.length === minCount;

		if(hasAllClasses) {
    	list.classList.remove('hide');
    } else {
    	list.classList.add('hide');
    }
  });
});