Problem: On the html page, it is able to run the JS file once (allow a the modal to pop out and display the contents) however the button "Full Listing" is only able to work on the first option and each page (different search which filters the rows returned). Every other click of full listing button other than the first does not do anything.
Button and JS which is a part of the same php file
<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];
An ID is expected to be unique. The DOM will only qualify the first ID = 'Button'. You will need to use class="Button"
then use:
var btn = document.getElementsByClassName("Button")
This also applies to ID="Modal". It will have to be changed to a class if every row has it's own modal.
The tricky part will be to associate which button shows/hides which modal. There's many different ways this can be done. I would show one way here, but you're not using jQuery so I'm not familiar with doing it with document objects.