why doesnt work in Chrome! (when it works in firefox!)

why doesnt work in Chrome! (when it works in firefox!)

this is part of my html

                    <label for="classification">Classification</label>
                    <select name="classification" id="classification">
                            <option class="notOption" value="faculty">Faculty</option>
                            <option class="notOption" value="staff">Staff</option>
                            <option class="notOption" value="student">Student</option>
                            <option class="notOption" value="graduateAssistant">Graduate Assistant</option>
                            <option id="otherClassificationOption" value="other">Other</option>
                    </select>
                    <div id="otherClass" style="display: none"><label for="otherClassification">Other specify:</label>
                            <input type="text" name="otherClassification" id="otherClassification" ><br />
                    </div>
and this is my jquery
$(document).on('click', '.notOption' , function() {
             notAnOpt = $(document).find('#otherClass');
             notAnOpt.hide();
});
$(document).on('click', '#otherClassificationOption' , function() {
             notAnOpt = $(document).find('#otherClass');
             notAnOpt.show();
});
thanks!