If Statement within While Loop - Php/Wordpress

So i'm having a bit of bother with a project i'm working on, I took over this from another developer and I haven't done much if/while statements in Php.

But basically this is a Company Timeline element where if the user clicks on a timeline dot it will show the correct image and text to go with it.

So basically there are 5 timeline dots and the issue that is for some reason the same text shows for two of the timeline dots and then the next text for the next two dots. It's also doing something similar with the images.

If anyone could help, it would be greatly appreciated

    <section class="company-timeline-sect">
        <div class="white-to-color-wave" style="background-image: url('<?php echo th_get_img("wave-masks/white-to-color-wave.svg"); ?>');margin-bottom: 80px;"></div>
        <div class="container">
            <?php if (get_field('company_timeline_intro') != "") : ?>
            <div class="row">
                <div class="col">
                    <?php echo get_field('company_timeline_intro') ?>
                </div>
            </div>
            <?php endif; ?>
            <?php if (have_rows('timeline_points_repeater') != "") : ?>
            <div class="row">
                <div class="col" style="overflow-x: scroll; cursor: grab; cursor: -webkit-grab;" id="bar">
                    <div class="timeline-bar" style="background-image: url('<?php echo th_get_img("/timeline/background-line.png"); ?>');">
                        <div class="row">
    
                        <?php 
                        while (have_rows('timeline_points_repeater')) : the_row(); 
                            $group_parent = get_sub_field('timeline_point_group');
                        ?>
                            <div class="col">
                                <div class="timeline-dot">
                                    <p><?php echo $group_parent['timeline_point_top_text']; ?></p>
                                    <img src="<?php echo th_get_img("/timeline/timeline-dot.png") ?>" alt="" id="<?php echo $group_parent['id'] ?>" onclick="HideTimelines();ShowTimeline(<?php echo $group_parent['id']; ?>);">
                                    <p><?php echo $group_parent['timeline_point_bottom_text']; ?></p>
                                </div>
                            </div>
                        <?php endwhile; ?>
    
                        </div>
                    </div>
                </div>
            </div>
            <div class="row my-hide" style="margin-top: 30px;">
                <?php $i = 0; ?>
                <?php while (have_rows('timeline_points_repeater')) : the_row(); ?>
                    <?php $group_parent = get_sub_field('timeline_point_group'); ?>
    
                    <?php if ($i == 0) : ?>
                    <div class="col-md-6 hidabletimeline">
                        <img src="<?php echo $group_parent['image']; ?>" alt="">
                    </div>
                    <div class="col-md-6 hidabletimeline">
                        <?php echo $group_parent['content']; ?>
                    </div>
    
                    <?php else: ?>
                    <div class="col-md-6 hidabletimeline no-display">
                        <img src="<?php echo $group_parent['image']; ?>" alt="">
                    </div>
                    <div class="col-md-6 hidabletimeline no-display">
                        <?php echo $group_parent['content']; ?>
                    </div>
                    
                    <?php endif;?>
                        
                    <?php $i++;?>
                <?php endwhile; ?>
            </div>
            <?php endif; ?>
        </div>
    </section>

Here is the js

// TimeLine
function HideTimelines() {
  let hidabletimeline = document.getElementsByClassName("hidabletimeline");

  for (let i = 0; i < hidabletimeline.length; i++) {
    hidabletimeline[i].classList.add("no-display");
  }
}

function ShowTimeline(i) {
  let hidabletimeline = document.getElementsByClassName("hidabletimeline");
  hidabletimeline[i].classList.remove("no-display");
  hidabletimeline[i+1].classList.remove("no-display");
}
// TimeLine