Как добавить обработчик событий к динамически извлекаемым данным из мангуста

Question

я получаю данные из базы данных и отображаю их на экране, как показано ниже

when user clicks on book appointment button he should able to see the slots which have a div with id #slot-display

but it works only on first book appointment button. if we click second book appointment button that is for name Dr manav it toggles the same first book appointment button and show div for slots for dr smira. here div means the slot timings i am showing like 9.31 15.32 etc

here is what i have tried

$(document).ready(function () {
  $(document).on("click", "#slot_toggle", (e) => {
    e.preventDefault();

    $("#slot-display").toggle();

  });
});

#slot_toggle - button id
#slot-display - div to toggle

ejs code

 <% list.forEach (item => {%>  <% = item.createdBy.name%>   <% = item.speciality%>   <% = item.education%>   <% = item.experience%> Годы опыта   <% = item.location%>   <% = item.hospitalList%>     Запись на прием   <% if (item.slots) {%> <% for (i in slots) {%> <% = slots [i] .startTime%> <%}%> <%}%>        <%})%>