Trying to manage z-index of code blocks

I am trying to update our meet the team page. The old page has an accordion with a couple sections, now I grouped them all into a lightbox with custom code. What I am struggling with is that each person has their own code block, and, I believe because of the z-index of the code blocks themselves, the most people's respective lightbox doesn't cover everything behind it.

Here is the page link: https://www.bostonhiddengems.com/meet-the-team-1
password: bhg

If you click on "About Chris", it works as intended. If you click on anyone else's, you'll see that one or two people's names are still visible above the lightbox. What I want to happen is when you click on anyone's, it works like Chris's - everything on the page is behind it.

This code exists in a separate HTML codeblock at the top of the page (hidden behind the "Meet the Team" header). All of this code was generated with the help of ChatGPT.

<style>
  .name-title {
    text-align: center;
    font-size: 22px;
    z-index: 1;
  }
  
  /* Lightbox overlay */
  .lightbox-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
    justify-content: center;
    align-items: center;
    z-index: 9998 !important; /* High z-index to appear above all content */
    overflow: auto; /* Allows scrolling if content is too large */
  }

  /* Lightbox content */
  .lightbox-content {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    max-width: 80%;
    max-height: 80%;
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 9999 !important;
  }

  /* Columns */
  .columns {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }

  .column {
    flex: 1;
    min-width: 200px; /* Minimum width for each column */
  }

  /* Close button */
  .close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
  }

  .openLightboxButton {
    cursor: pointer;
    text-decoration: underline;
    text-align: center;
    font-size: 18px;
  }
</style>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    document.querySelectorAll('.openLightboxButton').forEach(function(element) {
      element.addEventListener('click', function() {
        // Get the target lightbox ID from the data attribute
        var target = this.getAttribute('data-target');
        document.getElementById(target).style.display = 'flex';
      });
    });
  
    document.querySelectorAll('.close-button').forEach(function(button) {
      button.addEventListener('click', function() {
        // Find the closest lightbox overlay and hide it
        this.closest('.lightbox-overlay').style.display = 'none';
      });
    });
  
    document.querySelectorAll('.lightbox-overlay').forEach(function(overlay) {
      overlay.addEventListener('click', function(event) {
        if (event.target === this) {
          this.style.display = 'none';
        }
      });
    });
  });
</script>

And then here is Chris's code block as an example. Note that I replaced the actual text with "...text..." for brevity. For the other people, the only things we change besides that text are the names, data-target, and its respective id.

<p class="name-title">
  <b>Chris</b>
  <br>
  Director of Marketing & Sales
  <br>
  <span class="openLightboxButton" data-target="chris-box">About Chris</span>
</p>

<!-- Lightbox overlay -->
<div id="chris-box" class="lightbox-overlay">
  <div class="lightbox-content">
    <button class="close-button">X</button>
    <div class="columns">
      <div class="column">
        <h3>Background</h3>
        <p>...text...</p>
      </div>
      <div class="column">
        <h3>Travel</h3>
        <p>...text...</p>
      </div>
      <div class="column">
        <h3>Boston Specialties</h3>
        <p>...text...</p>
      </div>
      <div class="column">
        <h3>Hobbies</h3>
        <p>...text...</p>
      </div>
    </div>
  </div>
</div>