How do I link to a dynamic ACF button from a Custom Post type?

Question

I have a custom post type archive that has articles that call some ACF content on each post. I've used WP_Query to pull these articles onto the archive page, and there's a button in each article that when clicked will open a modal window with images I've placed in an ACF repeater for the custom post.

How do I call the modal window by that button without calling the other modal windows open?

Here's my code for the archive page:

<?php if ($the_query->have_posts()) { ?>
    <div id="post-list" class="columns property-grid">
        <?php while( $the_query->have_posts() ) : $the_query->the_post(); ?>
        <?php get_template_part( 'partials/content' , 'property' ); ?>
        <?php endwhile; // while has_post(); ?>

        <?php the_posts_pagination(); ?>
    </div>
<?php } else { ?>
        <?php } wp_reset_postdata(); ?>
<?php } endif { ?>

and here's my code for the data per article loop:

            <h2><?php the_title(); ?></h2>
            <?php echo get_field('property_address');?>
            <a href="#" class="button gallery-button">View Images</a>

Here is my code for the modal gallery popup, if necessary:

<div class="modal-gallery">
            <span class="close cursor" onclick="closeModal()">&times;</span>
            <div class="modal-content">
                <?php if(have_rows('property_gallery')) : ?>
                    <?php while(have_rows('property_gallery')) : the_row() ?>
                        <img class="prop-image" src="<?php echo get_sub_field('image'); ?>" alt=""><br>

                        <!-- Next/previous controls -->
                        <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
                        <a class="next" onclick="plusSlides(1)">&#10095;</a>

                        <!-- Caption text -->
                        <div class="caption">
                            <p><?php echo get_sub_field('image_text'); ?></p>
                        </div>
                    <?php endwhile ?>
                <?php endif; ?>
            </div>
        </div>

in my JS file I have a function called openModal, but I don't know how to call the Modal window of a specific article. If I call by class it won't work since each button will share that class, and I can't specify an ID without an ID already being set per article. The incomplete code is below:

function openModal(){
    $('.gallery-button').click(function(){
        event.preventDefault();
        console.log('gallery-button pressed');
    });
}

Answer 1

I decided to rewrite my code and no longer use JS to open the Modal window, but pure CSS. I then attached the POST ID to the ID tag so that each modal window would be unique.

code for a tag below. Href matches the ID on modal div.

<a href="#open-modal-<?php echo $post->ID; ?>" class="button gallery-button">View Images</a>