Django Dependent Dropdown List not displaying

my dropdown list is not getting displayed. Not only the filtered value but the whole doctor_dropdown.html. Is there some problem my Ajax? The thing that i want is that when a patient clicks on neurology dropdown list the doctors are to be displayed should be a neurologist only.

HTML AND SCRIPT

<div class="loginContainer" id="signupContainer">
        <div class="img">
            <img src="{% static 'image/booking.svg' %}">
        </div>
        <div class="login-content">
            <form method="POST" id="signupForm" data-doctor-url="{% url 'ajax_load_doctor' %}">
                {% csrf_token %}
                <h2 class="title">Booking form</h2>
                {% for d in patient_details%}
                <div class="input-div one">
                    <div class="i">
                        <ion-icon name="person-circle"></ion-icon>
                    </div>
                    <div class="div">
                        <h5>Patient ID: PID - {{d.id}}</h5>
                        <input type="hidden" name="PatientID" value="{{d.id}}">
                    </div>
                </div>
                <div class="input-div one">
                    <div class="i">
                        <ion-icon name="person"></ion-icon>
                    </div>
                    <div class="div">
                        <h5>Name: {{d.FirstName}} {{d.LastName}}</h5>
                    </div>
                </div>
                    {% endfor %}
                <div class="input-div one" id = "bookingField">
                    <div class="i">
                        <ion-icon name="business"></ion-icon>
                    </div>
                    <div class="div">
                        <div class="custom-select">
                            <select name="Department" id="Department" required>
                                <option value="General">Select a Department</option> //department part
                                {% for d in department_details%}
                                <option value="{{d.id}}">{{d.name}}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                </div>
                <a href="doctors" id="bookingMoreBtn" class="section-btn btn btn-default btn-blue smoothScroll">Visit our Departments</a>
                <div class="input-div one" id = "bookingField">
                    <div class="i">
                        <ion-icon name="medkit"></ion-icon>
                    </div>
                    <div class="div">
                        <div class="">
                            <select name="doctor" id="doctor" required> //doctors to be displayed here
                            </select>
                        </div>
                    </div>
                </div>
                <a href="doctors" id = "bookingMoreBtn" class="section-btn btn btn-default btn-blue smoothScroll">Meet our Doctors</a>
                <div class="input-div one">
                    <div class="i">
                        <ion-icon name="bandage"></ion-icon>
                    </div>
                    <div class="div">
                        <h5>Symptoms</h5>
                        <input type="datalist" class="input" name="Symptoms" required>
                    </div>
                </div>
                <div class="input-div one focus">
                    <div class="i">
                        <ion-icon name="calendar"></ion-icon>
                    </div>
                    <div class="div">
                        <h5>Appointment Date</h5>
                        <input type="date" class="input" name="Date" required>
                    </div>
                </div>
                <div class="input-div one focus">
                    <div class="i">
                        <ion-icon name="time"></ion-icon>
                    </div>
                    <div class="div">
                        <h5>Appointment Time</h5>
                        <input type="time" class="input" name="Time" required>
                    </div>
                </div>
                <div class="input-div one">
                    <div class="i">
                        <ion-icon name="document-text"></ion-icon>
                    </div>
                    <div class="div">
                        <h5>Comments (Optional)</h5>
                        <input type="textarea" class="input" name="comment">
                    </div>
                </div>
                <button type="submit" class="loginBtn">Submit</button>
                <a href="userProfile" class="section-btn btn btn-default btn-blue smoothScroll">Return to Personal Profile</a>
                <a href="./" class="section-btn btn btn-default btn-blue smoothScroll">Cancel Booking</a>
            </form>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
        $("#Department").change(function () {
            var url = $("#signupForm").attr("data-doctor-url");  
            var department_id = $(this).val();  
    
            $.ajax({                       
                url: url,                    
                data: {
                    'Department_id': department_id      
                },
                success: function (data) {   
                    $("#doctor").html(data); 
                }
            });
    
        });
    </script>

doctor_dropdown.html

<option value="">---select doctor---</option>
{% for doctor in doctors %}
<option value="{{ doctor.pk }}"> {{doctor.name}}</option>
{% endfor %}

view.py

def load_doctor(request):
    department_id = request.GET.get('Department_id')
    doctors = Doctor.objects.all().filter(
        speciality=department_id).order_by('name')
    return render(request, 'doctor_dropdown.html', {'doctors': doctors})

URLS.py

 path('load-doctor', views.load_doctor, name='ajax_load_doctor'),