Ссылка на окно подтверждения из forloop

Я пытался создать всплывающее окно подтверждения удаления из цикла forloop, я не могу заставить его работать, или определить, какие идентификаторы или как передать идентификаторы для оверлея

Я получил это, но он ссылается только на первый элемент цикла, я пробовал сериализовать идентификаторы с элементом pk (myNavRef{{ref.pk}}), но не работает

{% for ref in perf_bim.referenciapredio_set.all %}
<tr>
<th scope="row">{{ forloop.counter }}</th>
<th>{{ref.rol_fk.rol}}</th>
<th>{{ref.rol_fk.dir}}</th>
<td><a href="{% url 'det_ref_pr' ref.pk %}"><img src="{% static 'arrow.png' %}" height=20 alt=""></a></td>
<td><button onclick="openNavRef()" type="button" class="btn btn-outline-dark btn-sm"><img src="{% static 'trash.svg' %}" alt="" height=15 ></button><br></td>

</tr>

<div id="myNavRef" class="overlay">
<div class="fontformat"style="padding-top:250px;width:40%;margin:auto;">
<div class="overlay-content">
<a href="{% url 'borrar_ref' ref.pk %}"type="button "class="btn btn-warning btn-sm"style="color:black;">Eliminar Referncia de Predio Rol: {{ref.rol_fk.rol}}</a>
<br>
<a href="javascript:void(0)" type="button "class="btn btn-bright btn-sm" onclick="closeNavRef()">Cancelar</a>
</div>
</div>
</div>
{% endfor %}

<script>
function openNavRef() {
document.getElementById("myNavRef").style.display = "block";
}
function closeNavRef() {
document.getElementById("myNavRef").style.display = "none";
}
</script>

Спасибо!!!

Если вы хотите отобразить соответствующий div, то вы можете определить div с идентификатором unique. Затем вы можете отобразить соответствующий div с помощью предоставленного id элемента.

Сначала установите ваш элемент div с уникальным id как

<div id="myNavRef{{ref.pk}}" class="overlay">

Затем на вашем button элементе onclick передайте то же самое id, что и 

<button onclick="openNavRef('{{ref.pk}}')" type="button" class="btn btn-outline-dark btn-sm">

Также для вашей кнопки закрытия как

<a href="javascript:void(0)" type="button "class="btn btn-bright btn-sm" onclick="closeNavRef('{{ref.pk}}')">Cancelar</a>

Тогда в вашем javascript

<script>
    function openNavRef(id) {
        document.getElementById("myNavRef" + id).style.display = "block";
    }
    function closeNavRef(id) {
        document.getElementById("myNavRef" + id).style.display = "none";
    }
</script>
Вернуться на верх