Pop Up Gallery on HTML / JS displaying all images in same carrousel

Hey everyone so I'm starting to get the hang of HTML, CSS & JS and I'm trying to help a friend out with a small issue he is having with his pop up gallery.

So he currently added 2 main images and each image, when clicked, should open 4 pop up images, but whats happening is that it doesn't matter what image is clicked the pop up gallery will load all 8 images.

This is his HTML code:

<section id="mobileapps" class="iq-page-blog">
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-4">
                <div class="iq-blog-box">
                        <div class="iq-blog-image clearfix popup-gallery">
                            <div class="item">
                                <a href="images/screenshots/05.jpg" class="popup-img">
                                <a href="images/screenshots/06.jpg" class="popup-img">
                                <a href="images/screenshots/07.jpg" class="popup-img">
                                <a href="images/screenshots/08.jpg" class="popup-img">
                                <img class="img-responsive" src="images/services/radio.png" alt="#"></a></a></a></div>
                            </div>  
                        <div class="iq-blog-detail">
                            <div class="blog-title"> <section class="text-center"><h5 class="iq-tw-6">Title goes here</h5> </a> </div>
                            <div class="blog-content">
                                <p>Test goes here.</p>
                                <p>*Text goes here.</p>
                            </div>

I traced popup-gallery back to his JS folder and found this:

$('.popup-gallery').magnificPopup({
    delegate: 'a.popup-img',
    tLoading: 'Loading image #%curr%...',
    type: 'image',
    mainClass: 'mfp-img-mobile',
    gallery: {
        navigateByImgClick: true,
        enabled: true,
        preload: [0, 1]
    },
    image: {
        tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
    }
});

Is there something I can add in order to get each main image to load there own pop up images?

His website isn't live yet but here is a sample image and as you can see each main image is loading the total 8 instead of 4.

Any help is much appreciated.