在点击上添加和删除类（在wordpress循环中）

So I have a wordpress loop to show certain posts. Each posts has a modal that I'll show the in and each modal is triggered by the .modal-trigger class. However, because there are more than one posts I want to prevent the user from opening more than one modal at a time and this is why I want to remove the .modal-trigger class once it is clicked. I will then addClass the .modal-trigger once the .fa-close is clicked

my main objective is to remove the .modal-trigger class once it is clicked and add this class once the .fa-close class is clicked

<section class="meet-the-team">
    <div class="inner">
            <?php
                $team = new wp_query (array(
                    'post_type' => 'team',
                    'orderby'   => 'date',
                    'order'        =>   'ASC'
                ));
                if($team->have_posts()):
                    while($team->have_posts()):
                        $team->the_post();
            ?>
            <div class="team-section">
          <p class="team-header"><?php the_title(); ?></p>
          <p class="team-details"><?php the_field('person_job_title'); ?></p>

        <button class="button modal-trigger ">Read More</button>

                    <!-- MODAL SECTION FOR READ MORE POSTS -->
                    <div class="my-Modal">
                     <i class="fa fa-close"></i>
                     <?php the_title(); ?>
                     <p><?php the_field('person_job_title'); ?></p>
                     <?php the_content(); ?>
                    </div>
                <!-- ENDING OF MODAL SECTION -->
      </div>
             <?php
                endwhile;
                else: "no posts available" ;
                endif;
                wp_reset_postdata();
                ?>

my jquery

$(document).ready(function(){
    $('.modal-trigger').click(function(){
        var post_content = $(this).parent('.team-section').find('.my-Modal').fadeIn().css('transform' , 'translate(0px , 15%)' );
        $('.button .modal-trigger').removeClass('modal-trigger');
    });
    $('.fa-close').click(function(){
        $('.my-Modal').fadeOut().css('transform' ,  'translate(0px , 5%)');
        $('.button .modal-trigger').addClass('modal-trigger');
    });
});

thank you for any help!

This won't work because your opening click removes the class you use to 'close' as well. Essentially, the following element you try to select doesn't exist anymore:

$('.button .modal-trigger').addClass('modal-trigger');

I'd go with a global variable that blocks all clicks when active, something like this:

$(document).ready(function(){

    var hasActiveModal = false;

    $('.modal-trigger').click(function(){
        if(!hasActiveModal) {
            hasActiveModal = true;
            var post_content = $(this).parent('.team-section').find('.my-Modal').fadeIn().css('transform' , 'translate(0px , 15%)' );
            return;
        }
    });
    $('.fa-close').click(function(){
        if(hasActiveModal) {
            hasActiveModal = false;
            $('.my-Modal').fadeOut().css('transform', 'translate(0px , 5%)');
            return;
        }
    });
});

This way you keep track of an active modal, and only allow modals to be opened when there's no open modal, and close them when there's a modal open.