Django: модалбокс с javascript

Question

на моем Django веб-сайте на странице пользователя есть список элементов, добавленных пользователем. Рядом с каждым из них есть кнопка «Удалить». При нажатии он показывает модальное поле в качестве подтверждения. Проблема в том, что показывается только первый модальный блок, а не остальные. Как это может быть? Большое спасибо!

html шаблон:

    <!-- Inserire il database dell'utente registrato -->
    {% if object_list %}
    {% for o in object_list %}
    <div class="container_band">
      <div class=album_band>
        <!-- insert an image -->
        {%if o.cover%}
        <img src= "{{o.cover.url}}" width="100%">
        {%endif%}

      </div>

      <div class="info_band">
        <!-- insert table info -->
        <table>
          <tr><th colspan=2><h3>{{o.band}}</h3></th></tr>
          <tr><td> Anno: </td><td> {{o.anno}} </td></tr>
          <tr><td> Disco: </td><td> {{o.disco}} </td></tr>
          <tr><td> Etichetta: </td><td> {{o.etichetta_d}} </td></tr>
          <tr><td> Matrice: </td><td> {{o.matrice}} </td></tr>
        </table>
      </div>

      <div class="mod">
        <table>
          <tr>
            <td>
              <a href="{% url 'edit_info' id=o.id %}"><button type="button" class=" btn btn-default"> UPDATE </button></a>
            </td>
          </tr>
          <tr>
            <td>
                <button id="modalBtn" class="button">delete</button>
                <!--<a href="{% url 'delete_info' id=o.id %}"><button id="modal-btn" type="button" class=" btn btn-default"> DELETE</button></a>-->
            </td>
          </tr>
        </table>
        <div id="simpleModal" class="modal">
          <div class="modal-content">
            <span id="close" class="closeBtn">&times;</span>
              <p> prova modal box </p>
          </div>
        </div>
      </div>



    </div>
  {% endfor %}
  {%endif%}
  </div>



  <div class="pagination">
    <span class="step-links">
        {% if page_obj.has_previous %}
            <a href="?page=1">&laquo; first</a>
            <a href="?page={{ page_obj.previous_page_number }}">previous</a>
        {% endif %}

        <span class="current">
            Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
        </span>

        {% if page_obj.has_next %}
            <a href="?page={{ page_obj.next_page_number }}">next</a>
            <a href="?page={{ page_obj.paginator.num_pages }}">last &raquo;</a>
        {% endif %}
    </span>
  </div>

</div>

Javascript:

<script>
  var modal = document.getElementById('simpleModal');
  var modalBtn = document.getElementById('modalBtn');
  var closeBtn = document.getElementById('close');

  if (modalBtn){
    modalBtn.addEventListener('click', openModal);
  }

  if (closeBtn){
  closeBtn.addEventListener('click', closeModal);
  }

  function openModal(){
    modal.style.display = 'block';
  }

  function closeModal(){
    modal.style.display = 'none';
  }

</script>