filter an item using 2 dropdown options using jquery

Question

I'm looking for a way to filter an item using a dropdown option. I have 2 dropdown options, namely filter by year and type. I've made the code like below but it still doesn't work properly.

I have a schema that will probably make you understand how the filter I mean works. In the filter year select 2020, and in the filter type select type-2. There should be appear 1 data.

This filter does not require that all filters be used, it can only be 1 filter (year or type) and can use 2 filters at once.

Can anyone help me solved this problem?

$(".filter").each(function(){
$(".filter").change(function()
  {
      var rex = $(this).val();
            if (rex != "All") $(".result-filter .item").show().not('[data-year="' + rex + '"]').hide();
            else $(".result-filter .item").show(); 
  });       
});

.filter-wrapper{
  display: flex;
}

.filter-wrapper #year-filter{
  margin-right: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filter-wrapper">
  <div class="form-group">
  <label for="">Year:</label>
  <select name="" id="year-filter" class="filter">
    <option value="All">All Year</option>
    <option value="2020">2020</option>
    <option value="2019">2019</option>
    <option value="2018">2018</option>
  </select>
</div>
<div class="form-group">
  <label for="">Type:</label>
  <select name="" id="type-filter" class="filter">
    <option value="All">All Type</option>
    <option value="type-1">Type 1</option>
    <option value="type-2">Type 2</option>
    <option value="type-3">Type 3</option>
  </select>
</div>
</div>

<ul class="result-filter">
  <li class="item" data-year="2020" data-type="type-1">
    <h6>2020</h6>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptate!</p>
    <p>Type 1</p>
  </li>
  <li class="item" data-year="2020" data-type="type-2">
    <h6>2020</h6>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <p>Type 2</p>
  </li>
  <li class="item" data-year="2019" data-type="type-2">
    <h6>2019</h6>
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Type 2</p>
  </li>
</ul>

Answer 1

    <div id="filter-box">
    
    <div class="search-input">
        <input type="text" placeholder="exp. : city, county, name, category">
    </div>
    
    <div class="filter-buttons">
    
        <select name="city" id="city">
            <option value="">city 1</option>
            <option value="">city 2</option>
            <option value="">city 3</option>
        </select>
    
        <select name="county" id="county">
            <option value="">county 1</option>
            <option value="">county 2</option>
            <option value="">county 3</option>
        </select>
    
        <select name="category" id="category">
            <option value="">category 1</option>
            <option value="">category 2</option>
            <option value="">category 3</option>
        </select>
    
    </div>
    
    </div>
    
    
    
    <div id="card-box">
    
        <div class="card">
          <div class="card-img">
            <img src="" alt="" />
          </div>
    
          <div class="card-body">
            <h2 class="card-name">Name</h2>
            <p class="card-category">category</p>
            <p class="card-description">description</p>
            <p class="card-location">City, County</p>
          </div>
    
          <div class="card-footer">
            <a href="" class="card-location-map-button">Show On Map</a>
            <div class="social-media">
              <i class="fas whatsup">whatsup</i>
              <i class="fas insyagram">insyagram</i>
              <i class="fas facebook">facebook</i>
              <i class="fas youtube">youtube</i>
            </div>
          </div>
        </div>
    
        <div class="card">
            <div class="card-img">
              <img src="" alt="" />
            </div>
      
            <div class="card-body">
              <h2 class="card-name">Name</h2>
              <p class="card-category">category</p>
              <p class="card-description">description</p>
              <p class="card-location">City, County</p>
            </div>
      
            <div class="card-footer">
              <a href="" class="card-location-map-button">Show On Map</a>
              <div class="social-media">
                <i class="fas whatsup">whatsup</i>
                <i class="fas insyagram">insyagram</i>
                <i class="fas facebook">facebook</i>
                <i class="fas youtube">youtube</i>
              </div>
            </div>
          </div>
    
          <div class="card">
            <div class="card-img">
              <img src="" alt="" />
            </div>
      
            <div class="card-body">
              <h2 class="card-name">Name</h2>
              <p class="card-category">category</p>
              <p class="card-description">description</p>
              <p class="card-location">City, County</p>
            </div>
      
            <div class="card-footer">
              <a href="" class="card-location-map-button">Show On Map</a>
              <div class="social-media">
                <i class="fas whatsup">whatsup</i>
                <i class="fas insyagram">insyagram</i>
                <i class="fas facebook">facebook</i>
                <i class="fas youtube">youtube</i>
              </div>
            </div>
          </div>
    
    </div>  

Answer 2

Try with this solution

$(".filter").change(function() {
  var typeFilter = $("#type-filter").val();
  var yearFilter = $("#year-filter").val();
  
  $(".result-filter .item").show();
  
  if(typeFilter !== "All") {
    $(".result-filter .item").not('[data-type="' + typeFilter + '"]').hide();
  }
  
  if(yearFilter !== "All") {
    $(".result-filter .item").not('[data-year="' + yearFilter + '"]').hide();
  }
});

Link to jsfiddle: https://jsfiddle.net/Cuchu/e8m0fLqk/11/

Regards!