Как фильтровать данные, используя jquery и css?

Question

Я работаю с данными фильтра, используя jquery, css. Я передаю имя класса в div и фильтрую по этому имени в jquery.

Это функциональность, у меня есть два типа фильтров.

Когда пользователь щелкает еще один элемент только в типе фильтра 1 , данные должны отображать все выбранные данные. фильтр типа 2 также должен работать следующим образом.

Но, если пользователь пытается фильтровать, используя тип фильтра 1 и тип фильтра 2, он должен показывать только данные, которые должны включать в себя f тип фильтра 1 и тип фильтра 2 .

Вот мой код.

  <div class="schedulenew__filters">
    <div class="schedulenew__filters-head clearfix">
      <h2 class="schedulenew__filter-title pull-left">Filter Type 1</h2>
      <a class="schedulenew__filter-clear pull-right" href="javascript:;">CLEAR FILTER</a>
    </div>
    <div class="schedulenew__filters-body clearfix">
      <label><input class="filter-checkbox" name="filter" value="filter1-data1" type="checkbox"> data1</label>
      <label><input class="filter-checkbox" name="filter" value="filter1-data2" type="checkbox"> data2</label>
      <label><input class="filter-checkbox" name="filter" value="filter1-data3" type="checkbox"> data3</label>
      <label><input class="filter-checkbox" name="filter" value="filter1-data4" type="checkbox"> data4</label>
    </div>
  </div>



  <div class="schedulenew__filters">
    <div class="schedulenew__filters-head clearfix">
      <h2 class="schedulenew__filter-title pull-left">Filter Type 2</h2>
      <a class="schedulenew__filter-clear pull-right" href="javascript:;">CLEAR FILTER</a>
    </div>
    <div class="schedulenew__filters-body clearfix">
      <label><input class="filter-checkbox" name="filter" value="filter2-track1" type="checkbox"></input> filter-track1</label>
      <label><input class="filter-checkbox" name="filter" value="filter2-track2" type="checkbox"></input> filter-track1</label>
      <label><input class="filter-checkbox" name="filter" value="filter2-track3" type="checkbox"></input> filter-track1</label>
    </div>
  </div>


  <div class="schedulenew__list-item">
    <div class="filter-item filter1-data1 filter2-track1 filter2-track2">
      <p>DATA 1</p>
    </div>
  </div>

  <div class="schedulenew__list-item">
    <div class="filter-item filter1-data2 filter2-track3 filter2-track1">
      <p>DATA 2</p>
    </div>
  </div>

  <div class="schedulenew__list-item">
    <div class="filter-item filter1-data4 filter2-track3">
      <p>DATA 3</p>
    </div>
  </div>

  <div class="schedulenew__list-item">
    <div class="filter-item filter1-data2 filter2-track2 filter2-track3">
      <p>DATA 4</p>
    </div>
  </div>

 function myFunction(item, index) {
   $('.' + item).show();
   $('.' + item).parent().show();
 }

 function filterengine() {
   var favorite = [];
   $.each($("input.filter-checkbox:checked"), function() {
     favorite.push($(this).val());
   });

   // Filter List
   if (favorite.length === 0) {
     $('.filter-item').show();
     $('.schedulenew__list-item').show();
   } else {
     $('.filter-item').hide();
     $('.schedulenew__list-item').hide();
     favorite.forEach(myFunction);
   }
 };

 /* Schedule filter */
 $('.schedulenew__filters-body label input').click(function() {
   $this = $(this);
   value = $this.val();
   filterengine();
 });


 $('.schedulenew__filter-clear').click(function() {
   $(this).closest('.schedulenew__filters').find('input.filter-checkbox').prop('checked', false);
   filterengine();
 });

Кто-нибудь Пожалуйста, помогите.