I am asking user to book appointment date and time against a doctor in the available doctor list in jsp file.

I am using flatpickr to get date and timeslot from the user. I have data in multiple rows in jsp file and I have to get date and time against each row. I am using closet to get the date and timeslot from a particular row. I am getting the error as "datePicker.closest is not a function"

    <input type="text" id="datePicker" placeholder="Select a date" />
             </td>      
             
  <td>      <div id="timeSlotContainer">
            <label>Choose a Time Slot:</label>
            <select id="timeSlot"></select>
        </div>
    
  </td>
  
    <td>
    <input type="submit" onclick="openPopup(<%= doctorID %>,'<%= doctorname %>','<%= speciality %>')" value ="Book Now" style="background-color: blue; color: white;">
    </td>
   
    
        
   
    
    </tr>
    <% } %>
</table>
<script>
flatpickr("#datePicker", {
    enableTime: false,  // Only allow date selection
    dateFormat: "Y-m-d",  // Format: YYYY-MM-DD
    minDate: "today",  // Disable past dates
    onChange: function(selectedDates, dateStr) {
        if (dateStr) {
            showTimeSlots(dateStr);
        }
    }
});

// Function to Show Time Slots After Selecting Date
function showTimeSlots(datePicker) {
            var row = datePicker.closest("tr"); // Find the closest row
            var timeSlotContainer = row.querySelector(".timeSlotContainer");
            var timeSlotDropdown = row.querySelector(".timeSlot");
            
            console.log("Selected row:", row);
            console.log("Time Slot Container:", row.querySelector(".timeSlotContainer"));
            console.log("Time Slot Dropdown:", row.querySelector(".timeSlot"));

            if (!timeSlotContainer || !timeSlotDropdown) {
                console.error("Time slot elements not found in this row!");
                return;
            }

            // Clear previous slots
            timeSlotDropdown.innerHTML = "";

            // Sample time slots
            var availableSlots = ["10:00 AM", "11:00 AM", "2:00 PM"];
            availableSlots.forEach(slot => {
                var option = document.createElement("option");
                option.value = slot;
                option.textContent = slot;
                timeSlotDropdown.appendChild(option);
            });

            // Show the time slot dropdown for the selected row
            timeSlotContainer.style.display = "block";
        }
</script>

<!-- Popup Container for update function-->
    <div class="popup-container" id="popup">
        <div class="popup-box">
            <button class="close-btn" onclick="closePopup()">X</button>
            <h3>Are you sure you want to book the below appointment</h3>
            <form action="update.jsp" method="POST">
                <table>
                <tr><td>Doctor Id : </td><td><input type="number" id="doctorID" name="doctorID" readonly></td></tr>
                <tr><td>Doctor Name : </td><td><input type="text" id="doctorname" name="doctorname" readonly></td></tr>
                
                <tr><td>Speciality : </td><td><input type="text" id="speciality" name="speciality" ></td></tr>
                 <tr><td>Appointment Day : </td><td><input type="text" id="selectedDate" name="selectedDate" ></td></tr>
                 <tr><td>Appointment Time : </td><td><input type="text" id="selectedSlot" name="selectedSlot" ></td></tr>
                </table>

                <button type="submit">Book it</button>
            </form>
        </div>
    </div>
    
       


<script>
        // Function to Open Popup and Fill Form with Data
        function openPopup(doctorID,doctorname, speciality) {
            //document.getElementById("apptime1").value = document.getElementById("datetimePicker").value;
            document.getElementById("doctorID").value = doctorID;
            document.getElementById("doctorname").value = doctorname;
            document.getElementById("speciality").value = speciality;
            //document.getElementById("popup").style.display = "flex";
            document.getElementById("selectedDate").value = document.getElementById("datetimePicker").value;
            document.getElementById("selectedSlot").value = document.getElementById("timeSlot").value;

            if (selectedDate && selectedSlot) {
              //  document.getElementById("popupContent").innerText = `Selected Date: ${selectedDate}\nSelected Slot: ${selectedSlot}`;
                document.getElementById("popup").style.display = "block";
            } else {
                alert("Please select both date and time slot.");
            }
            
        }

        // Function to Close Popup
        function closePopup() {
            document.getElementById("popup").style.display = "none";
        }
        
        

    </script>