Only the First Button works in Django loop

Question

The div only appears if the first button is clicked. Its works as i wanted but only for the first button in loop. When i manually put display = "block" it appears though on bith loop. What i want is to toggle the class "bg-model" by clicking on the class "editTime".

Any help would be appreciated. Thanks in advance...

HTML

<h4>Appointments</h4>
                    {% if upcomming_appointments %}
                        {% for d in upcomming_appointments %}
                        <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
                            <h6 class="mb-0">
                                <ion-icon name="medkit"></ion-icon> Appointment with <strong>{{d.PatientName}}</strong><a class="btn btn-info "
                                    id="sessionBtn" href="{% url 'medicalReport' d.id %}">Start Session</a>
                            </h6>
                            <span class="text-secondary">
                                Date: <strong>{{d.appoitmentDate}}</strong> <br>
                                Time: <strong>{{d.appoitmentTime}}</strong><br>
                                Symptoms: <strong>{{d.symptoms}}</strong><br>
                                Comment: <strong>{{d.Comments}}</strong><br>
                            </span>
                            <a id = "changeTime" class="editTime">Change time</a>
                            <a class="btn btn-info " id="logoutBtn" href="{% url 'delete_appointment' d.id %}"
                                onclick="return confirm('Are you sure you want to cancel this appointment? This action is irreversible.')">Cancel
                                Appoitment</a>
                            <div class="bg-modal">
                                <div class="modal-contents">
                                    <div class="close">+</div>
                                    <form method="POST">
                                        <h5>Change Appointment Time</h5>
                                        {{d.id}}
                                        <input type="hidden" name="SessionID" value="{{d.id}}">
                                        <input type="time" id="timeChange" class="input" placeholder="Time">
                                        <button type="submit" class="loginBtn">Submit</button>
                                    </form>
                                </div>
                            </div>
                        </li>

JS

document.querySelector('.editTime').addEventListener("click", function() {
    document.querySelector('.bg-modal').style.display = "flex";
});

document.querySelector('.close').addEventListener("click", function() {
    document.querySelector('.bg-modal').style.display = "none";
});

views.py

def doctorProfile(request):
    upcomming_appointments = Appoitment.objects.all().filter(
        DoctorEmail=request.user, appoitmentDate__gte=timezone.now()).order_by('appoitmentDate')
    past_appointments = Appoitment.objects.all().filter(
        DoctorEmail=request.user, appoitmentDate__lt=timezone.now()).order_by('-appoitmentDate')
    g = request.user.groups.all()[0].name
    if g == 'Doctor':
        doctor_details = Doctor.objects.all().filter(EmailAddress=request.user)
        d = {'doctor_details': doctor_details,
             'upcomming_appointments': upcomming_appointments,
             'past_appointments': past_appointments}
    return render(request, 'doctorProfile.html', d)