Why is the data of a variable in a loop not the same everywhere?

Question

Yii

Hi all. I ran into an incomprehensible situation:
there is a cycle <?php foreach($hits as $hit): ?>
and naturally
<?php endforeach;?>
in this cycle I take the $hit variable and insert it where necessary.
But it doesn't work in all places. In some places, the variable records only the last element of the array, and it turns out that all displayed elements on the page contain information from the last element of the array. I even do not know why? I don’t see any explanation at all, except as machines rising up against me ...

<div class="row isotope-grid">
    <?php foreach($hits as $hit): ?>

    <div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item boy">
        <div class="block2">
            <div class="block2-pic hov-img0">
                <?= Html::img("@web/images/{$hit->img}", ['alt' => $hit->name])?>
                    <a href="" class="block2-btn flex-c-m stext-103 cl2 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04 js-show-modal1">
 						Quick View
 					</a>
            </div>
            <div class="block2-txt flex-w flex-t p-t-14">
                <div class="block2-txt-child1 flex-col-l ">
                    <a href="" class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6">
                        <?= $hit->name?>

                    </a>
                    <span class="stext-105 cl3">
 							<?= $hit->price?> грн
 							
 						</span>
                </div>
                <div class="block2-txt-child2 flex-r p-t-3">
                    <a href="" class="btn-addwish-b2 dis-block pos-relative js-addwish-b2">
 							<i class="zmdi zmdi-phone" style="font-size: 30px"></i>
 						</a>
                </div>
            </div>
        </div>
    </div>
    <!-- восстание против меня -->
    <div class="wrap-modal1 js-modal1 p-t-60 p-b-20">
        <div class="overlay-modal1 js-hide-modal1"></div>
        <div class="container">
            <div class="bg0 p-t-60 p-b-30 p-lr-15-lg how-pos3-parent">
                <button class="how-pos3 hov3 trans-04 js-hide-modal1">
 						<img src="/images/icons/icon-close.png" alt="CLOSE">
 					</button>
                <div class="row">
                    <div class="col-md-6 col-lg-7 p-b-30">
                        <div class="p-l-25 p-r-30 p-lr-0-lg">
                            <div class="wrap-slick3 flex-sb flex-w">
                                <div class="wrap-slick3-dots"></div>
                                <div class="wrap-slick3-arrows flex-sb-m flex-w"></div>

                                <div class="slick3 gallery-lb">
                                    <div class="item-slick3" data-thumb="images/detail-01.jpg">
                                        <div class="wrap-pic-w pos-relative">
                                            <!-- изображение тоже из последнего элемента массива -->
                                            <?= Html::img("@web/images/{$hit->img}", ['alt' => $hit->name])?>
                                                <a class="flex-c-m size-108 how-pos1 bor0 fs-16 cl10 bg0 hov-btn3 trans-04" href="images/detail-01.jpg">
 													<i class="fa fa-expand"></i>
 												</a>
                                        </div>
                                    </div>

                                    <div class="item-slick3" data-thumb="images/detail-02.jpg">
                                        <div class="wrap-pic-w pos-relative">
                                            <img src="/images/detail-02.jpg" alt="img-detail">

                                            <a class="flex-c-m size-108 how-pos1 bor0 fs-16 cl10 bg0 hov-btn3 trans-04" href="images/detail-02.jpg">
 													<i class="fa fa-expand"></i>
 												</a>
                                        </div>
                                    </div>

                                    <div class="item-slick3" data-thumb="images/detail-03.jpg">
                                        <div class="wrap-pic-w pos-relative">
                                            <img src="/images/detail-03.jpg" alt="img-detail">

                                            <a class="flex-c-m size-108 how-pos1 bor0 fs-16 cl10 bg0 hov-btn3 trans-04" href="images/detail-03.jpg">
 													<i class="fa fa-expand"></i>
 												</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-5 p-b-30">
                        <div class="p-r-50 p-t-5 p-lr-0-lg">
                            <h4 class="mtext-105 cl2  p-b-14">
                                <!-- вот здесь переменная ведет себя против меня -->
                                <?= $hit->name?>
                            </h4>
                            <span class="mtext-106 cl2">
 									$58.79
 								</span>

                            <p class="stext-102 cl3 p-t-23">
                                Тут описание тратататататтаттатт и лабуда
                            </p>
                            <!--  -->
                            <div class="p-t-33">
                                <div class="flex-w flex-r-m p-b-10">
                                    <div class="size-204 flex-w flex-m respon6-next">
                                        <button class="flex-c-m stext-101 cl0 size-101 bg1 bor1 hov-btn1 p-lr-15 trans-04 js-addcart-detail">
 												Add to cart
 											</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <?php endforeach;?>
</div>

Answer 1

1. Initially incorrect data in $hits.
Check: print_r.
Fix: where this array is formed
2. Blocks are jumbled due to css.
Check: look at the html in the source code of the page.
3. Due to js data is changed.
Check: look at the html in the source code of the page.
PS In order not to ask such questions, learn how to use xDebug.