JQUERY множественная фильтрация

Question

Мне нужно создать jquery фильтр показать / скрыть. а главное у меня 4 имени и 2 вида. Но каждое имя имеет два типа.

Как создать фильтр jquery с помощью этой функции. Вот код, который у меня есть ....

var $filterCheckboxes = $('input[type="checkbox"]');
        
        var selectedFilters = {};
        
        $filterCheckboxes.on('change', function() {
            
          selectedFilters = {};
          
          $filterCheckboxes.filter(':checked').each(function() {
            if (!selectedFilters.hasOwnProperty(this.name)) {
              selectedFilters[this.name] = [];
            }
            selectedFilters[this.name].push(this.value);
          });
          
          filter_speakers(true);
        
          
        });
        
        
        
        $('#clear-filters').on('click', function() {
          

          $('input[type="checkbox"]').prop("checked", false);
          
          filter_speakers(false);
          
        });
        
        function filter_speakers($data){
            
            if(!$data){
                selectedFilters = {};
            }
            
            // create a collection containing all of the filterable elements
              var $filteredResults = $('.speaker');
            
              // loop over the selected filter name -> (array) values pairs
              $.each(selectedFilters, function(name, filterValues) {
            
                // filter each .flower element
                $filteredResults = $filteredResults.filter(function() {
                
                  var matched = false,
                    currentFilterValues = $(this).data('category').toString().split(' ');
            
            
                  // loop over each category value in the current .flower's data-category
                  $.each(currentFilterValues, function(_, currentFilterValue) {
            
                    // if the current category exists in the selected filters array
                    // set matched to true, and stop looping. as we're ORing in each
                    // set of filters, we only need to match once
            
                    if ($.inArray(currentFilterValue, filterValues) != -1) {
                      matched = true;
                      return false;
                    }
                  });
            
                  // if matched is true the current .flower element is returned
                  return matched;
            
                });
              });
            
              $('.speaker').hide().filter($filteredResults).show();
        }

Names:

<input type="checkbox" class="filters" name="fl-name" id="1" value="1">name1

<input type="checkbox" class="filters" name="fl-name" id="2" value="2">name2

<input type="checkbox" class="filters" name="fl-name" id="3" value="3">name3

<br>
Types:


<input type="checkbox" class="filters" name="fl-type" id="type1" value="type1">type1

<input type="checkbox" class="filters" name="fl-type" id="type2" value="type2">type2



<div class="speaker" data-id="speaker1" data-category="1 2 3 4 5 6 8 type1 type2">Sample1</div>
 
 <div class="speaker" data-id="speaker2" data-category="2 type1" style="">Sample2</div>
                          
                          
<div class="speaker" data-id="speaker3" data-category="2 5 type3" style="">Sample 3</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

................................ .................................................. .................................................. .................................................. .................................................. .. Спасибо.