Input change event remembers the previously changed data. How to solve it?

I use the below template to create a list of some object cards. Each card has a unique doctor id and a button to book appointment. When I click the button, it works well for the first card. Then when I click the other cards, first it sends request with the clicked card’s doctor id and then with the previous cards’ ids. Is this issue caused by the change event? How to solve it?

function getDoctorTemplate(doctor){
    const $template = $($('#doctor-template').html());
    $template.find('#template-doctor-name').text(doctor.name);
    $template.find('#template-doctor-contacts').text(doctor.contactDetails);
    $template.find('#book-appointment').click(function(){
        console.log("doc id ",doctor.id);
        $('#appointment-date').change(function(){
            let doctorId = doctor.id;
            let date = $('#appointment-date').val();
            $.ajax({
                url:"schedule/doctor/search",
                method:"GET",
                data:{
                    doctorId: doctorId,
                    date: date
                },
                success: function(data){
                    console.log(data);
                    if(data.length != 0){
                        $('#appointment-hour-select').empty();
                        for(let i=data.fromHour;i<data.toHour;i++){
                            $('#appointment-hour-select').append($('<option>', {
                                value: i,
                                text: (i<10?"0"+i+":00":i+":00")
                            }));
                        }
                    }else{
                        alert("Schedule not available yet!");
                    }
                    if(data == null){
                        alert("Schedule not available yet!");
                        clearModal();
                    }
                },
                fail: function(){
                    alert("Schedule search completed with fail!")
                }
            });
        });
        clearModal();
    });
    return $template;
}

Doctor with id 34 has no item with the selected date, so it returns empty data, then the select is filled with the data of the first request. I want to “forget” the first requests data. Is this possible? When I use off or unbind for the change, the code does not work.