I have the following code to generate the content with the data from Server Side:
<?php foreach($products['product'] as $product_row) {
if (count($product_row['variants']) <= 1) {
$variant_id = $product_row['variants'][0]['id'];
$modal = "";
} else {
$product_row = "";
$modal = "#quick-view";
}
$variant_price = ($product_row['variants'][0]['special_price'] > 0 && $product_row['variants'][0]['special_price'] != '') ? $product_row['variants'][0]['special_price'] : $product_row['variants'][0]['price'];
$data_min = (isset($product_row['minimum_order_quantity']) && !empty($product_row['minimum_order_quantity'])) ? $product_row['minimum_order_quantity'] : 1;
$data_step = (isset($product_row['minimum_order_quantity']) && !empty($product_row['quantity_step_size'])) ? $product_row['quantity_step_size'] : 1;
$data_max = (isset($product_row['total_allowed_quantity']) && !empty($product_row['total_allowed_quantity'])) ? $product_row['total_allowed_quantity'] : 0;
$sh_desc = strip_tags($product_row['short_description'] ?? "")


                    ?>
                    <div class="col-6 product-grid" data-aos="fade-up" data-aos-duration="200">
                        <div class="product-card h-100 rounded-16 position-relative transition-2" style="padding: 0px !important;">
                            <div class="product-card__thumb rounded-8 position-relative">
                                <!-- "<?=base_url()?><?= 'products/details/' . $product_row['slug'] ?>" -->
                                <a href="<?=base_url()?><?= 'products/details/' . $product_row['slug'] ?>" class="w-100 h-100 flex-center"> 
                                    <img src="<?= $product_row['image_sm'] ?>" alt="" class="w-auto rounded-8">
                                </a>
                                <!--
                                <div class="position-absolute inset-block-start-0 inset-inline-start-0 mt-16 ms-16 z-1 d-flex flex-column gap-8">
                                    <span class="text-main-two-600 w-40 h-40 d-flex justify-content-center align-items-center bg-white rounded-circle shadow-sm text-xs fw-semibold">-29%</span>
                                    <span class="text-neutral-600 w-40 h-40 d-flex justify-content-center align-items-center bg-white rounded-circle shadow-sm text-xs fw-semibold">HOT</span>
                                </div>
                                -->

                                <div class="expand-btn-container bg-white p-2 rounded-pill z-1 position-absolute inset-inline-end-0 inset-block-start-0 me-16 mt-16 shadow-sm">
                                    <button type="button" class="expand-btn w-40 h-40 text-md d-flex justify-content-center align-items-center rounded-circle hover-bg-main-two-600 hover-text-white">
                                        <i class="ph ph-plus"></i>
                                    </button>
                                    <div class="expand-icons gap-20 my-20">
                                        <button type="button" class="text-neutral-600 text-xl flex-center hover-text-main-two-600 wishlist-btn">
                                            <i class="ph ph-heart"></i>
                                        </button>
                                        <button type="button" class="text-neutral-600 text-xl flex-center hover-text-main-two-600">
                                            <i class="ph ph-eye"></i>
                                        </button>
                                        <button type="button" class="text-neutral-600 text-xl flex-center hover-text-main-two-600">
                                            <i class="ph ph-shuffle"></i>
                                        </button>
                                    </div>
                                </div>
                                <!--
                                <div class="countdown position-absolute start-50 inset-block-end-0 mb-20 translate-middle-x w-100" id="countdown12">
                                    <ul class="countdown-list style-four flex-center flex-wrap gap-8">
                                        <li class="countdown-list__item flex-align flex-column text-sm fw-medium text-white rounded-lg bg-neutral-600">
                                            <span class="days text-2xl text-main-two-600 fw-medium"></span>Days
                                        </li>
                                        <li class="countdown-list__item flex-align flex-column text-sm fw-medium text-white rounded-lg bg-neutral-600">
                                            <span class="hours text-2xl text-main-two-600 fw-medium"></span>Hour
                                        </li>
                                        <li class="countdown-list__item flex-align flex-column text-sm fw-medium text-white rounded-lg bg-neutral-600">
                                            <span class="minutes text-2xl text-main-two-600 fw-medium"></span>Min
                                        </li>
                                        <li class="countdown-list__item flex-align flex-column text-sm fw-medium text-white rounded-lg bg-neutral-600">
                                            <span class="seconds text-2xl text-main-two-600 fw-medium"></span>Sec
                                        </li>
                                    </ul>
                                </div>
                                -->
                            </div>
                            <div class="product-card__content w-100">
                                <div class="product-card-tags">
                                    <?php foreach($product_row['tags'] as $tag){?>
                                        <span class="py-2 px-8 text-xs rounded-pill text-main-two-600 bg-main-two-50"><a href="<?=base_url("products/tags/".$tag)?>"><?=$tag?></a></span>
                                    <?php } ?>
                                </div>
                                <h6 class="title text-lg fw-semibold" style="margin-bottom: 0px !important;">
                                    <a href="<?=base_url()?><?= 'products/details/' . $product_row['slug'] ?>" class="link text-line-2" tabindex="0"><?= short_description_word_limit(output_escaping(str_replace('\r\n', '&#13;&#10;', strip_tags($product_row['name'])))) ?></a>
                                </h6>
                                <!--
                                <div class="flex-align gap-6">
                                    <div class="flex-align gap-8">
                                        <span class="text-15 fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                        <span class="text-15 fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                        <span class="text-15 fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                        <span class="text-15 fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                        <span class="text-15 fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                    </div>
                                    <span class="text-xs fw-medium text-gray-500">4.8</span>
                                    <span class="text-xs fw-medium text-gray-500">(12K)</span>
                                </div>
                                -->

                                <span class="py-2 px-8 text-xs rounded-pill text-main-two-600 bg-main-two-50 mt-4"><a href="<?=base_url("products/category/".$product_row['category_name'])?>"><?=$product_row['category_name']?></a></span>
                                <!--
                                <?php foreach($product_row['sub_categories'] as $cat){?>
                                    <span class="py-2 px-8 text-xs rounded-pill text-main-two-600 bg-main-two-50 mt-16"><a href="<?=base_url("products/category/".$cat)?>"><?=$cat?></a></span>
                                <?php } ?>
                                -->

                                <span class="py-2 px-8 text-xs rounded-pill text-main-two-600 bg-main-two-50 mt-4"><a href="<?=base_url('sellers/seller_details/'.$product_row['seller_slug'])?>"><?='由'.$product_row['store_name'].'提供'?></a></span>

                                <div class="product-card__price mt-4 mb-4">
                                    <?php global $hkdNBF; if($variant_price != $product_row['variants'][0]['price']) { ?>
                                        <span class="text-gray-400 text-md fw-semibold text-decoration-line-through"><?=$hkdNBF->formatCurrency($product_row['variants'][0]['price'], "HKD")?></span>
                                    <?php } ?>
                                    <span class="text-heading text-md fw-semibold "><?=$hkdNBF->formatCurrency($variant_price,"HKD")?> <span class="text-gray-500 fw-normal"></span></span>
                                </div>
                                <!--
                                <a href="#" class="add_to_cart product-card__cart btn bg-gray-50 text-heading hover-bg-main-600 hover-text-white py-11 px-24 rounded-8 flex-center gap-8 fw-medium" data-product-id="<?= $product_row['id'] ?>" data-product-variant-id="<?= $variant_id ?>" data-product-title="<?= $product_row['name'] ?>" data-product-image="<?= $product_row['image']; ?>" data-product-price="<?= $variant_price; ?>" data-min="<?= $data_min; ?>" data-step="<?= $data_step; ?>" data-product-description="<?= short_description_word_limit(output_escaping(str_replace('\r\n', '&#13;&#10;', $sh_desc))); ?>" data-izimodal-open="<?= $modal ?>">
                                    加至購物車 <i class="ph ph-shopping-cart"></i> 
                                </a>
                                -->
                            </div>
                        </div>
                    </div>
                <? } ?>
How can I make these data and HTML element with the infinite scroll (load more) effect and the responsive design?