<button data-modal-trigger="trigger-1" class="trigger cycle-button">

<div data-modal="trigger-1" class="modal">
<article class="content-wrapper">
    <button class="close"></button>
    <div class="content row">

            <div class="col-md-6">
                <img src="img/clients/<?php echo $instructor_row['image']; ?>" alt="Team Member" style="height:100%; width:100%;">
            </div>
            <div class="col-md-8">
                <h1>COACH <?php echo $instructor_row['name']; ?></h1>
                <span class="#">CYCLEHOUSE HEAD COACH</span><BR>
                <span class="#">"<?php echo $instructor_row['bio']; ?>"</span><BR><BR>
            </div>

    </div>
</article>
</div>

const buttons = document.querySelectorAll(`button[data-modal-trigger]`);

for(let button of buttons) {
modalEvent(button);
}

function modalEvent(button) {
button.addEventListener('click', () => {
    const trigger = button.getAttribute('data-modal-trigger');
    const modal = document.querySelector(`[data-modal=${trigger}]`);
    const contentWrapper = modal.querySelector('.content-wrapper');
    const close = modal.querySelector('.close');

    close.addEventListener('click', () => modal.classList.remove('open'));
    modal.addEventListener('click', () => modal.classList.remove('open'));
    contentWrapper.addEventListener('click', (e) => e.stopPropagation());

    modal.classList.toggle('open');

});
}