JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.appelsiini.net/projects/chained/jquery.chained.js"></script>
<select name="level" id="level_id">
                 <option value="level-1">Level 1</option>
                 <option value="level-2">Level 2</option>
                 <option value="level-3">Level 3</option>
    </select>

<select name="semester" id="semester_id">
                 <option value="semester-1">Semester 1</option>
                 <option value="semester-2">Semester 2</option>
     </select>
<br/>

<select name="course" id="course_id">
                 <option value="1" class="level-1\semester-1">Multimedia</option>
                 <option value="10" class="level-1\semester-1">Botany Practicals II</option>
                 <option value="9" class="level-1\semester-2">Genetics</option>
                 <option value="4" class="level-1\semester-2">Plant Diversity Unity & Evolution</option>
                 <option value="6" class="level-2\semester-2">Plant Anatomy</option>
                 <option value="5" class="level-2\semester-2">Scientific Approach & Biometrics</option>
                 <option value="11" class="level-2\semester-1">Advanced Ecology</option>
                 <option value="12" class="level-1\semester-1">Advanced Plant Pathology </option>
                 <option value="7" class="level-3\semester-1">Advanced Microbiology</option>
                 <option value="8" class="level-3\semester-1">Economic Botany</option>
                 <option value="13" class="level-3\semester-2">Cropping System</option>
                 <option value="14" class="level-3\semester-2">Food Technology</option>
     </select>

JavaScript

$("#course_id").chained("#level_id, #semester_id");