Noob JS about Drop Downs with Multiple Functions

Question

After looking here and various other places, I've found the single answers that I need, but I'm having a hard time mixing all the code without crashing it.

In short, I have a few drop down menus. One menu needs to update a span, check.
The same drop down needs to alter the options of the following drop down, nope.
And the same drop down needs to load an image in a div, functioning here, not on WP.

Also, when I put the JS into wordstream, it's simply not working as it should. The model number feature works, but not the div image.

She shower model drop down should alter the options in the hardware finish drop down.

The shower model drop down should also show an image in place of the 1, 2, 3, and 4.

Here's my fiddle thus far - https://jsfiddle.net/1zgoyh3k/47/

Here's my code as it is on Wordpress

window.onload=function(){

  // Shower Models 
  var list = document.getElementById('ModelSelect');
  var tag = document.getElementById('ModelSerial');

  list.onchange = function() {
    ModelSerial.innerHTML = this.value;
  };

   //Shower Model Images
       $(document).ready(function() {
    $('.ShowerModel').hide();
  $('#ModelSelect').change(function() {
    $('.ShowerModel').hide();
    $('#' + $(this).val()).show();
  });
});

  // Shower Finishes
  var list = document.getElementById('FinishSelect');
  var tag = document.getElementById('Finish');

  list.onchange = function() {
    Finish.innerHTML = this.value;
  };

  // Glass Width
  var list = document.getElementById('GWidth');
  var tag = document.getElementById('GlassWidth');

  list.onchange = function() {
    GlassWidth.innerHTML = this.value;
  };

  // Glass Height
  var list = document.getElementById('GHeight');
  var tag = document.getElementById('GlassHeight');

  list.onchange = function() {
    GlassHeight.innerHTML = this.value;
  };

  // Glass Type
  var list = document.getElementById('GlassType');
  var tag = document.getElementById('Glass');

  list.onchange = function() {
    Glass.innerHTML = this.value;
  };

}

    <h2>
Select Shower Model
</h2>
<select name="ModelSelect" id="ModelSelect">
  <option value="">Select Shower Model</option>
  <option value="LP204">LP204</option>
  <option value="JP402">JP402</option>
  <option value="FP209">FP209</option>
  <option value="JP206">JP206</option>
</select>
<br>
<br>
<h2>
Select Hardware Finish
</h2>
<select name="FinishSelect" id="FinishSelect">
  <option value="">Select Hardware Finish</option>
  <option value="PS">Polished Stainless</option>
  <option value="BS">Brushed Stainless</option>
  <option value="OB">Oil Rubbed Bronze</option>
  <option value="BR">Polished Brass</option>
  <option value="PN">Polished Nickel</option>
  <option value="BN">Brushed Nickel</option>
</select>
<br>
<br>
<h2>
Enter Glass Size
</h2> Width in Inches:
<input type="text" name="Width" id="GWidth">
<br>
<br> Height in Inches:
<input type="text" name="Height" id="GHeight">
<br>
<br>
<h2>
Select Glass Type
</h2>
<select name="GlassType" id="GlassType">
  <option value="">Select Option</option>
  <option value="CL">Clear</option>
  <option value="FR">Frosted</option>
  <option value="LI">Low Iron</option>
  <option value="LF">Low Iron Frosted</option>
  <option value="CT">Clear Textured</option>
  <option value="LT">Low Iron Textured</option>
</select>
<br>
<br>
<h2>
Model Image
</h2>
<div id="LP204">11</div>
<div id="JP402">2</div>
<div id="FP209">3</div>
<div id="JP206">4</div>
<br>
<br>
<h2>
Model Number
</h2>
<span id="ModelSerial"></span><span id="Finish"></span><span id="GlassWidth"></span><span id="GlassHeight"></span><span id="Glass"></span>

Answer 1

Found the answer. The code I have is correct, I just opened with:

jQuery(document).ready(function($) {

and now it works.