Java Script to Trigger Dependent HTML Select Drop Down Changes on Web Page

I have the script below to update one drop down list 'modelddl' based on the value of 'makeddl'. While both drop downs are displaying their relevant list of items independently from an SQLite DB the script does prompt a dependent change, so basically the script is not working but I can't tell why. appreciate any help on this as I have been stuck on this for some time now.

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function()
        {
                var $makevar = $("#makeddl");
                    $modelvar = $("#modelddl");
                    $options = $modelvar.find('option');
                    $makevar.on('change',function()
                    {
                    $modelvar.html($options.filter('[value="' + this.value + '"]'));
                    }).trigger('change');
        });
    </script>
</head>



<h2>Pick a Car</h2> 
            <! -- Drop Downs -->
            <form method="POST" action = "DUMMY ACTION - ACTION_OR_VIEW_URL_ON_SUBMIT_HERE" enctype='multipart/form-data'>{% csrf_token %}
                <label for="makeddl">Choose Make</label>
                {<select id="makeddl">
                    <option  disabled selected="true">Choose Make</option>
                    {% for makes in MotorMakesView %}
                    <option value="{{ makes.id}}"> {{ makes.MotorMakeName }} </option>      
                    {% endfor %}
                </select>
            <br><br>
            
            <label for="modelddl">Choose Model</label>
                <select id="modelddl"> 
                    <option disabled selected ="true">Model</option>
                    {% for mods in MotorModelsView %}
                    <option value="{{ mods.MotorMakeName}}"> {{ mods.MotorModelName}} </option> 
                    {% endfor %}
                </select>}
            <br><br>
           
        <! -- Submit Button -->

            <input type="submit" value="Get Offers"/>
        </form>

View.py

def home(request):
"""Renders the home page."""

displayMake=MotorMakes.objects.all()
displayModel=MotorModelsV2.objects.all()
 })

Example of some Data

MotorMakesView

id, MotorMakeName 1, Alfa Romeo /n 2, Audi /n 3, BMW /n

MotorModelsView Mkid is the fk between both tables;

id,Mkid,MotorMakeName, MotorModel 1,1,Alfa Romeo, Guiletti /n 2,1,Alfa Romeo, Stelvio /n 3,2,Audi,A1 /n 4,2,Audi,A2 /n 5,2,Audi,A3 /n 6,3,BMW, 1 Series /n