js is inconsistent for hidden divs
I have this js code:
$(document).ready(function() { $('#type').bind('change', function() { var elements = $('div.container2').children().hide(); // hide all the elements var value = $(this).val(); if (value.length) { // if somethings' selected elements.filter('.' + value).show(); // show the ones we want } }).trigger('change'); $('.second-level-select').bind('change', function() { var elements = $('div.second-level-container').children().hide(); // hide all the elements var value = $(this).val(); if (value.length) { // if somethings' selected elements.filter('.' + value).show(); // show the ones we want } }).trigger('change'); });<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container2"> <div class="writing form-group"> <select class="second-level-select form-control" name="topic1" id="type2" data-required> <option value=""> -Select Your Topic-</option> <option value="science">Science</option> <option value="socialstudies">Social Studies</option> <option value="literature">Literature</option> </select> </div> </div> <div class="second-level-container"> <div class="science form-group"> <select class="second-level-container form-control" name="skill1" id="type2" data-required> <option value=""> -Select Your Skill-</option> <option value="Command of Evidence">Command of Evidence</option> <option value="Words in Context">Words in Context</option> <option value="Grammar Conventions">Grammar Conventions</option> <option value="Idea Expression">Idea Expression</option> </select> </div> </div>Basically it allows me to create hidden divs that are dependent on the choice prior. The link gives you some reproducible code to emulate it. Normally, all my code works but occasionally it just does not load properly in my browser. It seems as if the browser is not recognizing the JS. In other online editors that render online, it works fine. How can I make sure that it always works/
EDIT
As requested
<div class ="form-group"> <label>Hello Bob</label><br> <select class="form-control" name="type" id="type" data-required> <option value="">Bob</option> <option value="bob">Bob</option> <option value="rhino">Rhino</option> <option value="cat">Cat</option> <option value="dog">Dog</option> </select> </div> 
I am not sure that correct understood how should work script. But check please.
$(document).ready(function() { $('#type1').on('change', function() { var elements = $('.second-level-container').children().hide(); var value = $(this).val(); if (value.length) { $('.' + value).show(); } }).trigger('change'); });<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container2"> <div class="writing form-group"> <select class="second-level-select form-control" name="topic1" id="type1" data-required> <option value=""> -Select Your Topic-</option> <option value="science">Science</option> <option value="socialstudies">Social Studies</option> <option value="literature">Literature</option> </select> </div> </div> <div class="second-level-container"> <div class="science form-group"> <select class="second-level-container form-control" name="skill1" id="type2" data-required> <option value=""> -Select Your Skill-</option> <option value="Command of Evidence">Command of Evidence</option> <option value="Words in Context">Words in Context</option> <option value="Grammar Conventions">Grammar Conventions</option> <option value="Idea Expression">Idea Expression</option> </select> </div> </div>
