Sort Divs через несколько выпадающих меню через data-event

Question

У меня есть рабочий код, который сортирует все соответствующие div на моей странице через атрибут data-eventtype.

У меня есть выпадающее меню, из которого вы можете выбрать свой атрибут, и divs сортирует только по показать тех, чей data-eventtype соответствует выбранному вами атрибуту. Код скрывает другие div, которые не совпадают.

Рабочий пример с использованием одного раскрывающегося атрибута:

https://codepen.io/btissame-qorchi/pen/zYGKEgb

Мне нужно позволяют пользователю выбирать несколько атрибутов с помощью нескольких раскрывающихся списков и дополнительно фильтровать результаты по каждому выбору Таким образом, вы можете выбрать «Musi c» из первого выпадающего меню и просмотреть все записи musi c, но затем отфильтровать результаты через «1920-е годы из второго выпадающего меню. Или« Art »из первого выпадающего меню. и «1850-е» от второго.

Мой JS:

$( ".event-type-select" ).change(function() {
  var selectedEventType = this.options[this.selectedIndex].value;
  if (selectedEventType == "all") {
    $('.container .div').removeClass('hidden');
  } else {
    $('.container div').addClass('hidden');
    $('.container div[data-eventculture="' + selectedEventType + '"]').removeClass('hidden');
    $('.container div[data-eventdate="' + selectedEventType + '"]').removeClass('hidden');
  } 
});

Мой HTML код с несколькими атрибутами:

    <form>
    <select class="event-type-culture">
      <option value="all">All</option>
      <option value="music">Music</option>
      <option value="art">Art</option>
      <option value="fashion">Fashion</option>
    </select>

   <select class="event-type-date">
      <option value="all">All</option>
      <option value="1850s">1850s</option>
      <option value="1920s">1920s</option>
      <option value="1950s">1950s</option>
    </select>
    </form>

<button class="sort-button" onclick="clearFilters(); return false;" >Clear Filters</button>


    <div class="container">
      <div data-eventculture="music" data-eventdate="1850s">Music 1850s 1</div>
      <div data-eventculture="art" data-eventdate="1850s">Art 1850s 1</div>
      <div data-eventculture="fashion" data-eventdate="1850s">Fashion 1850s 1</div>

      <div data-eventculture="music" data-eventdate="1850s">Music 1850s 2</div>
      <div data-eventculture="art" data-eventdate="1850s">Art 1850s 2</div>
      <div data-eventculture="fashion" data-eventdate="1850s">Fashion 1850s 2</div>

      <div data-eventculture="music" data-eventdate="1920s">Music 1920s 1</div>
      <div data-eventculture="art" data-eventdate="1920s">Art 1920s 1</div>
      <div data-eventculture="fashion" data-eventdatee="1920s">Fashion 1920s 1</div>

      <div data-eventculture="music" data-eventdate="1920s">Music 1920s 2</div>
      <div data-eventculture="art" data-eventdate="1920s">Art 1920s 2</div>
      <div data-eventculture="fashion" data-eventdate="1920s">Fashion 1920s 2</div>

      <div data-eventculture="music" data-eventdate="1950s">Music 1950s 1</div>
      <div data-eventculture="art" data-eventdate="1950s">Art 1950s 1</div>
      <div data-eventculture="fashion" data-eventdate="1950s">Fashion 1950s 1</div>

      <div data-eventculture="music" data-eventdate="1950s">Music 1950s 2</div>
      <div data-eventculture="art" data-eventdate="1950s">Art 1950s 2</div>
      <div data-eventculture="fashion" data-eventdate="1950s">Fashion 1950s 2</div>
    </div

Есть идеи? Спасибо заранее!