How do I loop through a div in a Foreach loop?

I have a Foreach loop that loops through an image grid block on my wordpress website. Everything is working fine but, I wanted to add a popup window so that it opens up whenever I click on images.

As you can see in below screenshot, the image, heading, body, full name and email are all looping correctly. However, the information inside my modal (popup window) isn't looping correctly. It shows 'Heading - 1 and Body - 1' whenever I click on image 2 instead of 'Heading - 2 & Body - 2'.

The two 'popup-heading-grid' and 'popup-body-grid' is looping correctly on its own as you can see, however, it doesn't loop when its inside the div with class 'modal'.

My questions is how do I get the Foreach to loop through the last chunck of div (the one with id="modal2") so that It correctly shows 'Heading - 2 & Body - 2' in the popup window when i click on the second image.

`

<div class='bounds bounds-collapse image-grid <?= ($block['contain_size']) ? 'ig-contain' : ''; ?> <?= ($block['heading_colour'] == 'black') ? 'ig-black-heading' : ''; ?> <?= $bg_colour; ?>'>
    <div class='align' >
        <?php if (!empty($block['heading'])) { ?>
            <h2><?= $block['heading']; ?></h2>
        <?php } ?>
        <div class='ig-columns ani-all' >
            <?php foreach($block['columns'] as $column) { $icon = (!empty($column['email_address'])); ?><div class='ig-column <?= ($icon) ? 'ig-icon-pad' : ''; ?>' >
                
                <div data-modal-target="#modal2" class='ig-image image ' style='background-image: url(<?= $column['image']['sizes']['large']; ?>'>
                    <?php if (!empty($block['tint'])) { ?>
                        <div class='ig-image-tint middle'></div>
                    <?php } ?>
                </div>
                
                <?= $column['popup-heading-grid']; ?>
                <?= $column['popup-body-grid']; ?>
                
                <?php if ($icon) { ?>
                    <a href='mailto:<?= $column['email_address']; ?>?subject=Website%20Enquiry'><img class='ig-icon' src='<?= SITE()->resource('artwork/mail.svg'); ?>'></a>
                <?php } ?>
                <?= $column['text']; ?>

                
                 <div class="modal" id="modal2">
                    <div class="modal-header">
                        <div class="title"><?= $column['popup-heading-grid']; ?></div>
                        <button data-close-button class="close-button">&times;</button>
                    </div>
                    <div class="modal-body">
                        <?= $column['popup-body-grid']; ?>
                    </div>
                </div>

                
            </div><?php } ?>
        </div>
    </div>
    <div id="overlay"></div>
</div>

`

Here is the screenshot of the popup window



Read more here: https://stackoverflow.com/questions/66995946/how-do-i-loop-through-a-div-in-a-foreach-loop

Content Attribution

This content was originally published by Murtaza Karimi at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: