TechTalk7

I have a list that displays data from my database and when I click on the CTA, it should fire up a modal and display the data on the modal. The data is being displayed inside a foreach loop. I also have assigned the modal ID based off of the table row ID pulled from my database.

function getReservations() {

 $sql = "SELECT * FROM reservations";

 $stmt = $pdo->prepare($sql);

 $results = $stmt->fetchAll(PDO::FETCH_ASSOC);

 return $results;

}

<?php $results = getReservations(); foreach ($results as $row) { ?>

    <div id="<?php echo $row['id']; ?>" class="modal opacity-0 pointer-events-none fixed w-full h-full top-0 left-0 flex items-center justify-center">
      <div class="modal-overlay absolute w-full h-full bg-gray-900 opacity-50"></div>
       <div class="modal-container bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg z-50 overflow-y-auto">
           <!-- Add margin if you want to see some of the overlay behind the modal-->
             <div class="modal-content py-4 text-left px-6">
                <!--Title-->
                  <div class="flex justify-between items-center pb-3">
                    <p class="text-2xl font-bold">Simple Modal!</p>
                     <div class="modal-close cursor-pointer z-50">
                       <svg class="fill-current text-black" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
                        <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
                       </svg>
                     </div>
                  </div>
             </div>
         </div>
  </div>
</div>

<?php } ?>

Here is the JavaScript I am working with:

    var openmodal = document.querySelectorAll('.modal-open')
    for (var i = 0; i < openmodal.length; i++) {
        openmodal[i].addEventListener('click', function (event) {
            event.preventDefault()
            toggleModal()
        })
    }

    const overlay = document.querySelector('.modal-overlay')
    overlay.addEventListener('click', toggleModal)

    var closemodal = document.querySelectorAll('.modal-close')
    for (var i = 0; i < closemodal.length; i++) {
        closemodal[i].addEventListener('click', toggleModal)
    }

    function toggleModal() {
    const body = document.querySelector('body')
    const modal = document.getElementById('<?php echo $row['id']; ?>')
    modal.classList.toggle('opacity-0')
    modal.classList.toggle('pointer-events-none')
    body.classList.toggle('modal-active')
    }

The functionality works, however, each row would only display data the from the first row’s ID and last row’s ID instead data off of their assigned ID. What changes/fixes could I apply to my code? Thank you and I appreciate your time reading.

TechTalk7

How to redirect extensions in WordPress to home page?

php – Display foreach loop data to modal