我有一份长长的团队成员名单；当用户在单个成员上单击cta时，会将一个类添加到一个模态框中，该模态框将其设置为可见。但是，当前每个模式窗口都在使用相同类的同时打开。
我想知道是否有可能将新类添加到被按下的特定团队成员中，我知道这是可能的，因为每个人都有自己的类，并且有多个相同的jquery函数-但这并不是我真正想要的解决方案，因为有很多，将来还会添加更多内容（这意味着我必须为他们更新js代码）。
注意：我使用的是wordpress，所以我可以使用php变量等。

$('.modal-toggle').on('click', function(e) {
  e.preventDefault();
  $('.modal').toggleClass('visible');
});

.main {
  position:relative;
}

article {
  background: red;
  position: relative;
  border-top: 2px solid red;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  width: 100%;
  height: 180px;
  }

img {
  height: auto;
  width: 180px;
}
.content {
  padding: 30px 35px;
}
h3 {
  font-weight: 400;
  margin-bottom: 10px;
  text-decoration: underline;
  font-size: 22pt;
  line-height: 28pt;
}
& > span {
  font-style: italic;
}
aside {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 25px;
}   
div.button {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: $red;
  width: 35px;
  height: 35px;
}

.modal {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
}
.modal-overlay {
  position: fixed;
  z-index: 5;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.3s, opacity 0.3s;
}
.modal.visible {
  visibility: visible;
}
.modal.visible .modal-overlay {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.modal.visible .modal-window {
  transform: translate(-50%, -50%);
  opacity: 1;
}
.modal-window {
  position: absolute;
  z-index: 11;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
  opacity: 0;
  transition: all 0.3s 0.15s;
  background: $white;
  border-top: 2px solid red;
  width: 900px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">

  <article class="team-member filter-result result-1">
    <img src="https://via.placeholder.com/85" alt="" />
    <div class="content">
      <h3>Name</h3>
      <aside>
        <div class="modal-toggle button" href="#">CLICK</div>
      </aside>
    </div>
  </article>
  <div class="modal">
    <div class="modal-overlay modal-toggle"></div>
    <div class="modal-window">
      <h1>Lorem Ipsum</h1>
    </div>
  </div>

  <article class="team-member filter-result result-2">
    <img src="https://via.placeholder.com/85" alt="" />
    <div class="content">
      <h3>Name</h3>
      <aside>
        <div class="modal-toggle" href="#">CLICK</div>
      </aside>
    </div>
  </article>
  <div class="modal">
    <div class="modal-overlay modal-toggle"></div>
    <div class="modal-window">
      <h1>Lorem Ipsum</h1>
    </div>
  </div>

  <article class="team-member filter-result result-3">
    <img src="https://via.placeholder.com/85" alt="" />
    <div class="content">
      <h3>Name</h3>
      <aside>
        <div class="modal-toggle" href="#">CLICK</div>
      </aside>
    </div>
  </article>
  <div class="modal">
    <div class="modal-overlay modal-toggle"></div>
    <div class="modal-window">
      <h1>Lorem Ipsum</h1>
    </div>
  </div>  

</div>