More Info Lightbox Pop ups

Hi! I am working on a clients site and I'm trying to create a custom popup window that will display more info when the user clicks.

Seemed simple enough but I've run into an issue. Whenever I try to add more than one pop-up to the page one or more of the buttons display above the current popup window. I've tried changing the z-index, giving everything unique IDs.

I'm really not a programmer and I've used ChatGPT to help me along but now I could use some better help!

This is the code I've got in the code block: 

  <!-- Button to open the pop-up window -->
<button class="open-button" onclick="createPopup('popup1')">MORE DETAILS</button>

  <!-- Pop-up window -->
<!-- Pop-up window -->
<div class="popup" id="popup1">
  <span class="close" onclick="closePopup('popup1')">&times;</span>
  <h2>Mount Shasta Farmers' Market</h2>
  <div class="row">
    <div class="column">
      <p><strong>Location:</strong> City Park, Mount Shasta</p>
      <p><strong>Hours:</strong> Mondays, 3pm-6pm</p>
    </div>
    <div class="column">
      <p><strong>Products:</strong> Organic fruits and vegetables, baked goods, crafts</p>
      <p><strong>Payment:</strong> Cash and credit cards</p>
    </div>
  </div>
</div>

<!-- Overlay -->
<!-- Overlay -->
<div class="overlay" id="overlay" onclick="closePopup('popup1')"></div>

And this I have in the site header:

<style>
  /* Styling for the button to open the pop-up window */
  .open-button {
    display: block;
    margin: auto;
    margin-bottom: 20px;
    padding: 10px 20px;
    font-size: 18px;
    font-weight: bold;
    color: white;
    background-color: #ff8726;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    border: none;
  }

  /* Styling for the pop-up window and overlay */
  .popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    width: 500px;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    padding: 20px;
  }

  .overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998;
  }

  /* Styling for the close button in the pop-up window */
  .close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #555;
    cursor: pointer;
  }

  /* Styling for the columns in the pop-up window */
  .column {
    float: left;
    width: 50%;
  }
</style>

<script>
  function createPopup(popupId) {
    // Get the pop-up window and overlay with the specified ID
    var popup = document.getElementById(popupId);
    var overlay = document.getElementById("overlay");

    // Set the pop-up window and overlay to be visible with an animation transition
    popup.style.opacity = "1";
    popup.style.display = "block";
    overlay.style.opacity = "1";
    overlay.style.display = "block";
  }

function closePopup(popupId) {
  // Get the pop-up window and overlay by ID
  var popup = document.getElementById(popupId);
  var overlay = document.getElementById("overlay");

  // Set the pop-up window and overlay to be hidden with an animation transition
  popup.style.opacity = "0";
  overlay.style.opacity = "0";

  // Set a timeout to hide the pop-up and overlay after the transition ends
  setTimeout(function() {
    popup.style.display = "none";
    overlay.style.display = "none";
  }, 500);
}

</script>

Can you share your site so I can check this clicking pop-up action?

https://www.siskiyoufarmco.com/farmers-markets-1

I see you changed to hover > show info, instead of using lightbox

Do you still need help with lightbox?