Problema: en la página html, puede ejecutar el archivo JS una vez (permita que aparezca el modal y muestre el contenido), sin embargo, el botón "Lista completa" solo puede funcionar en la primera opción y cada página (diferente búsqueda que filtra las filas devueltas). Cualquier otro clic del botón de lista completa que no sea el primero no hace nada.
Button y JS que es parte del mismo archivo php
<script> var modal = document.getElementById("Modal"); // Get the button that opens the modal var btn = document.getElementById("Button"); // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0];Se espera que una identificación sea única. El DOM solo calificará el primer ID = 'Botón'. Deberá usar class="Button"
luego usa:
var btn = document.getElementsByClassName("Button")
Esto también se aplica a ID="Modal" . Tendrá que cambiarse a una clase si cada fila tiene su propio modal.
La parte complicada será asociar qué botón muestra/oculta qué modal. Hay muchas maneras diferentes de hacer esto. Mostraría una forma aquí, pero no está usando jQuery, por lo que no estoy familiarizado con hacerlo con objetos de documento.