Модальное открытие только для первого элемента цикла for?

У меня есть мой цикл for в django такой, что он открывает модал только для первого элемента и ничего не происходит для других элементов? Это мой html файл, он отображает все элементы в таблице с кнопкой удаления. При нажатии на кнопку удаления открывается модальное окно, но оно открывается только для первого элемента? Что я должен изменить в этом?

 <table>
                {% for card in cards %}
                <tr class="record">
                  <td>{{card.number}}</td>
                  <td>
                    <button
                      class="hover:bg-gray-500 duration-500"
                      id="delete-btn"
                    >
                
                    </button>
  <div
                      class="
                        fixed
                        flex
                        justify-center
                        items-center
                        hidden
                      "
                      aria-labelledby="modal-title"
                      aria-modal="true"
                      id="overlay"
                    >
                   ............. #some lines of code
                          <div
                            class="
                              bg-gray-50
                              px-4
                              py-3
                              sm:px-6 sm:flex sm:flex-row-reverse
                            "
                          >
                            <a
                              href="{% url 'p:delete-card' card.id %}"
                              id="delbutton"
                            >
                              <button
                                type="button"
                                class="
                                  w-full
                                  inline-flex
                                  justify-center
                                
                                "
                              >
                                Delete
                              </button>
                            </a>
                          </div>
                        </div>
                      </div>
                  </td>
                </tr>
                {% endfor %}

мой js для открытия модала при нажатии на кнопку:

      window.addEventListener('DOMContentLoaded',() =>{
           const overlay = document.querySelector('#overlay')
           const delbtn = document.querySelector('#delete-btn')

           const toggleModal = () => {
               overlay.classList.toggle('hidden')
               overlay.classList.add('flex')
           }

             delbtn.addEventListener('click',toggleModal)
   
                 })

вызов url при нажатии кнопки delete:

  $(document).on("click","#delbutton" ,function(e){
                                e.preventDefault();
                                var $this = $(this);
                                    $.ajax({
                                        url: $this.attr("href"),
                                        type: "GET",
                                        dataType: "json",
                                        success: function(resp){
                                                $this.parents(".record").fadeOut("fast", function(){
                                                    $this.parents(".record").remove();
                                                     window.location.reload();

                                                });

                                        }
                                    });

                                return false;
                            });

 <button class="hover:bg-gray-500 duration-500 delete-button" id="delete-btn_{{card.id}}">
 </button>

  $(".delete-button").click(function() {
             var id = $(this).attr("id").split("_")[1]
               $(`#overlay_${id}`).show();
                 });