드롭 다운 메뉴에 여러 클래스가있는 div를 표시하거나 숨기려면 어떻게해야합니까?

저는 코딩에 익숙하지 않고이 문제에 대해 며칠 동안 연구를했고 막 다른 골목에 도달했습니다.

튜터 프로필이 포함 된 일련의 div가있는 간단한 웹 페이지가 있습니다. 각 div에는 각 튜터가 튜터 할 수있는 모든 과목이 포함 된 여러 클래스가 있습니다. 중복이 있습니다. 예를 들어, 많은 튜터가 대수 1을 튜터링 할 수 있으므로 누군가 드롭 다운에서 "Algebra 1"을 선택하면 div 클래스에 "algebra-one"이있는 튜터 만 표시되기를 원합니다. 누군가 "모든 항목"옵션을 선택하면 모든 프로필이 다시 표시되기를 원합니다 (잘 작동합니다). 페이지가로드 될 때 모든 프로필이 표시되기를 원합니다 (잘 작동 함).

문제는 드롭 다운이 네 번째 옵션 인 대수 2를 지나면 작동을 멈춘다는 것입니다. 이유가 무엇입니까? 이 문제를 어떻게 해결합니까? 내가하려는 일을 더 쉽게 할 수있는 방법이 있습니까?

코드 (다른 Stackoverflow 질문에서 일부 코드를 발견하고 지금까지 수정했습니다) : https://jsfiddle.net/hyptastic/d90kdmgg/

<select id="classes" multiple="multiple">
<option value="classes">all items</option>
<option value="sixth-grade-math">6th Grade Math</option>
<option value="algebra-one">Algebra 1</option>
<option value="algebra-two">Algebra 2</option>
<option value=“biology”>Biology</option>
<option value=“calculus”>Calculus</option>
<option value=“chemistry”>Chemistry</option>
<option value=“english”>English</option>
<option value=“geometry”>Geometry</option>
<option value=“government-economics”>Government/Economics</option>
<option value=“history”>History</option>
<option value=“homework-help”>Homework Help</option>
<option value=“physical-science”>Physical Science</option>
<option value=“physics”>Physics</option>
<option value=“pre-algebra”>Pre-Algebra</option>
<option value=“pre-calculus”>Pre-Calculus</option>
<option value=“spanish”>Spanish</option>
<option value=“statistics”>Statistics</option>
<option value=“test-prep”>Test Prep</option>
</select>

<div class="classes sixth-grade-math">Tutor 1</div>

<div class="classes sixth-grade-math algebra-one">Tutor 2</div>

<div class="classes sixth-grade-math algebra-one algebra-two">Tutor 3</div>

<div class="classes sixth-grade-math algebra-one algebra-two biology">Tutor 4</div>

<div class="classes biology">Tutor 5</div>


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

자바 스크립트 :

$('#classes').on('change', function () {
var number = $(this).val();
var classNames = '.' + number.join('.');
$(".classes").hide().filter(classNames).show();
});