Displaying all the images from all of my articles

I’m trying to replicate that codepen but using php wordpress. Basically I want my blogpost images displaying in another div and it changes every time you select another menu.

Thanks for the help.
Here is my code:

<?php 
$images = get_field('gallery');
if( $images ): ?>
<ul>
    <?php foreach( $images as $image ): ?>
        <li>    
                    <img src="<?php echo esc_url($image['sizes']['thumbnail']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
                <p><?php echo esc_html($image['caption']); ?></p>
            </li>
        <?php endforeach; ?>
    </ul>
<?php endif; ?>

I have noticed that $images = get_field('gallery'); stores the image of the latests post before its called. So I guess it has something to do with that. Now I wish I could just get all the images somewhere and apply them a data id corresponding to my articles. That is why I have a $counter = -1;.

Here is the complete code:

<div class="four">



    <?php
    $counter = -1;
// the query
    $all_posts = new WP_Query( array( 'post_type' => 'post', 'post_status' => 'publish', 'posts_per_page' => -1 ) );

    if ( $all_posts->have_posts() ) :
        ?>

        <ul>
            <?php while ( $all_posts->have_posts() ) : $all_posts->the_post(); $counter++ ?>
                <li class='sub-menu'> <a href='#' class="exposition"  data-id="divId<?php echo $counter; ?>"><?php the_title(); ?></a>  <ul>
                    <li><?php the_content(); ?>

                </li>
            </ul>
        </li>
    <?php endwhile; ?>
</ul>

<?php else : ?>
<?php endif; ?>



</div>
<div class="five">

<?php 
$images = get_field('gallery');
if( $images ): ?>
    <ul>    <div class="slide-photos" id="divId<?php echo $counter; ?>" data-id="divId<?php echo $counter; ?>"> 
        <?php foreach( $images as $image ): ?>
            <li>    
                <div class="photos-ind"><img id="divId<?php echo $counter; ?>" class="slide-photos" src="<?php echo esc_url($image['sizes']['thumbnail']); ?>" data-id="divId<?php echo $counter; ?>"/></div>
            </li>
        <?php endforeach; ?>
           </div>
    </ul>
<?php endif; ?>


</div>
</div>

All it does from now, is just displaying the latests post’s images correctly, what I would like is that its able to detect which post i’m clicking and display the image corresponding.