Using ACF Repeaters, that are using paralaxes

I have created a image and text block within ACF, and there are a bunch of options like switching sides of the text and image, can have a background etc.

The issue i am having, is that because you can duplicate these repeaters within wordpress on the pages, I have a parallax on the block, specifically the image block, and so, if you duplicate the repeater, the parallax obviously is duped also as the repeater is identical.

So when you scroll down, ALL the parallaxes will activate, which does not work as when you scroll down, the parallax blocks will be half way up the page as they are all starting at the same time.

Would there be a way to alter my code, so that the parallax only activates once it enters the viewport, rather than a scroll activation? Having the Paralax contained within it’s own box.

I hope that makes sense

php:

<?php
if ($bgColour == 'yes') : ?>
<div class="bg-primary pseudo-100 py-5 z-n1">
<?php endif; ?>
<div class="row align-items-center">
    <div class="col-12 col-md-6 <?= $directionTxt; ?> <?= $overTxt; ?>"><?= $text; ?>
        <?php
        $link = get_field('button');
        if ($link) :
            $link_url = $link['url'];
            $link_title = $link['title'];
            $link_target = $link['target'] ? $link['target'] : '_self';
        ?>
            <a class="button" href="<?php echo esc_url($link_url); ?>" target="<?php echo esc_attr($link_target); ?>"><?php echo esc_html($link_title); ?></a>
        <?php endif; ?>
    </div>
    <div class="col-12 col-md-6 position-relative <?= $directionImage; ?> <?= $overImg; ?>">
        <div id="parallax-container" data-speed="0.5">
            <div></div>
            <?php if ($backgroundColourBlock == 'yes') : ?>
                <div id="parallax-bg" class="parallax-item"></div>
            <?php endif; ?>
            <div id="middle-image" class="parallax-item"><?= wp_get_attachment_image($imageTwo, 'large'); ?></div>
            <div id="front-image" class="parallax-item"><?= wp_get_attachment_image($imageOne, 'large'); ?></div>
        </div>
    </div>
</div>
<?php
if ($bgColour == 'yes') : ?>
</div>

Javascript:

window.addEventListener('scroll', () => {
let parent =  document.getElementById('parallax-container');
let children = parent.getElementsByTagName('div');
for(let i = 0; i < children.length; i++) {
children[i].style.transform = 'translateY(calc(200px - ' + (window.scrollY * i / 
children.length) + 'px))';
}
}, false)