JSFiddle - React, Tailwind, and code Playground

by Joseph Rex

HTML

<select class="genderFilter">
    <option value="m">Male</option>
    <option value="f">Female</option>
    <option value="a">All</option>
</select>
<br>
<ul class="apply-list">
    <li><p data-gender="m">John Doe</p></li>
    <li><p data-gender="f">Justin Bieber</p></li>
    <li><p data-gender="m">Kurt Cobain</p></li>
    <li><p data-gender="f">Miley Cyrus</p></li>
</ul>

JavaScript

$(document).ready(function(){
(function( $ ){
   $.fn.filterSearch = function($selector) {
      $(document).on('change', $selector, function(){
        var selected = $(this).val();
        if (selected === 'a') {
          $('.apply-list li').fadeIn();
        }else{
          $('.apply-list [data-gender="'+ selected +'"]').parents('li').siblings('li').fadeOut();
          $('.apply-list [data-gender="'+ selected +'"]').parents('li').fadeIn();
        }
      });
     return this;
   }; })( jQuery );
    
//$('.genderFilter').filterSearch();

// Intended Action
/*$(document).on('change','.genderFilter',function(){
    var selected = $(this).val();
    if (selected === 'a') {
      $('.apply-list li').fadeIn();
    }else{
      $('.apply-list [data-gender="'+ selected +'"]').parents('li').siblings('li').fadeOut();
      $('.apply-list [data-gender="'+ selected +'"]').parents('li').fadeIn();
    }
  });
  */ 
});