Cascading Dropdown Wrongly Populating the menu

I am trying to make a cascading dropdown menu. It works well other than all the options displaying for the second menu off the bat which I don't want, there shouldn't be an ability to see the possible options before selecting an item from the first menu. Can I have some help in fixing this?

Here is what I am talking about.

here is my code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<h1>Choose Model and Timeframe</h1>
<h2> <select name="category">
    <option value="0" rel='start'>Select Model</option>
    <option value="1" rel="GFS">GFS</option>
    <option value="2" rel="NAM">NAM</option>
</select>

<select name="items" class="cascade", id="imgList">
    <option value="" class="start">Please select a model first</option>
    <option value='img/path' class="GFS">1-Day</option>
        <option value='img/path' class="GFS">5-Days</option>
        <option value='img/path' class="NAM">1-Day</option>
        <option value='img/path' class="NAM">5-Days</option>
     </select>

<script>
    $(document).ready(function(){
    var $cat = $('select[name=category]'),
    $items = $('select[name=items]');

    $cat.change(function(){
    
    var $this = $(this).find(':selected'),
    rel = $this.attr('rel');
            
    // Hide all
    $items.find("option").hide();
      
    // Find all matching accessories
    // Show all the correct accesories
    // Select the first accesory
    $set = $items.find('option.' + rel);
    $set.show().first().prop('selected', true);
    
    });
});

</script>
    <script>
        function setClass() {
            var img = document.getElementById("image");
            img.src = this.value;
            return false;
        }
        document.getElementById("imgList").onchange = setClass;
    </script>
</h2>