I am developing the online shop, and making the page to list out all sellers in page.
I have the following code for display all sellers:
<section class="vendor-two py-10">
    <div class="container container-lg">


        <?php if (isset($sellers) && !empty($sellers)) { ?>
        <div class="row">
            <div class="col-lg-12">
                <div class="gap-16 flex-wrap"  style="margin-bottom: 55px;justify-content: end;">
                    <div class="position-relative flex-align gap-16 flex-wrap">
                        <div class="list-grid-btns flex-align gap-16">
                            
                        </div>  
                        
                    </div>
                    <button type="button" class="w-44 h-44 d-flex flex-center border border-gray-100 rounded-6 text-2xl new-filter-modal-btn-open"><i class="ph-bold ph-funnel"></i></button>
                    <div id="new-filter-modal-filterTags" class="new-filter-modal-filter-tags"></div>
                </div>

                <div class="tab-content" id="pills-tabContent">
                    <div class="tab-pane fade show active" id="pills-sale" role="tabpanel" aria-labelledby="pills-sale-tab" tabindex="0">
                        
                        <div class="">
                            <!-- Vendors Start -->
                            <div style="width: 100%;" class="list-grid-wrapper vendors-two-item-wrapper grid-cols-3">
                                <?php foreach ($sellers as $row) {
                                    //print_r($row);
                                ?>
                                <div class="vendors-two-item rounded-12 overflow-hidden bg-color-three border border-neutral-50 hover-border-main-two-600 transition-2">
                                    <div class="vendors-two-item__top bg-overlay style-two position-relative">
                                        <div class="vendors-two-item__thumbs h-210">
                                            
                                            <a href="<?= base_url('sellers/seller_details/' . $row['slug']) ?>" style="width: 100%; height:100%"> 
                                                <img src="<?= $row['seller_banner'] ?>" alt="" class="cover-img"> 
                                            </a>
                                            
                                        </div>
                                        <div class="position-absolute top-0 inset-inline-start-0 w-100 h-100 p-24 z-1 d-flex flex-column justify-content-between">
                                            <div class="d-flex align-items-center justify-content-between">
                                                <span class="w-80 h-80 flex-center bg-white rounded-8">
                                                    <img style="width:100%;height:100%;object-fit: contain;" src="<?= $row['seller_profile'] ?>" alt="">
                                                </span>
                                                <!--<button type="button" class="text-uppercase border border-white px-16 py-8 rounded-pill text-white text-sm hover-bg-main-two-600 hover-text-white hover-border-main-two-600 transition-2">FOLLOW</button>-->
                                            </div>
                                            <div class="mt-8">
                                                <h6 class="text-white fw-semibold mb-8">
                                                    <a href="<?= base_url('sellers/seller_details/' . $row['slug']) ?>" class=""><?= short_description_word_limit(output_escaping(str_replace('\r\n', '&#13;&#10;', strip_tags($row['store_name'])))) ?></a>
                                                </h6>
                                                
                                                <div class="flex-align gap-6">
                                                    <?= renderStars($row['seller_rating']) ?>
                                                </div>
                                                
                                            </div>
                                            <div class="">
                                                <span class="text-xs fw-medium text-white">(<?= number_format($row['no_of_ratings']) ?> 評價)</span>
                                            </div>
                                            <div class="seller-list-tag-container" data-categories="<?=$row['categories_combined']?>"></div>
                                        </div>
                                    </div>
                                    <div class="vendors-two-item__content p-12 flex-grow-1">
                                        
                                        <a href="<?= base_url('sellers/seller_details/' . $row['slug']) ?>" class="btn bg-neutral-600 hover-bg-neutral-700 text-white py-12 px-24 rounded-8 flex-center gap-8 fw-medium">
                                            瀏覽商家詳情
                                            <span class="text-xl d-flex text-main-two-600"> <i class="ph ph-storefront"></i></span>
                                        </a>
                                    </div>
                                </div>
            
                                <?php } ?>
                            </div>
                            <!-- Vendors End -->
                        </div>
                    </div>
                </div>
            </div>
            
        </div>

        <?php } else { ?>
            <div class="col-12 text-center">
              <img src="<?= base_url('assets/front_end/classic/images/empty-orders.webp') ?>" alt="Empty Cart" style="width: 20%; max-width: 200px; margin-bottom: 20px;" />
                <h1 style="padding-bottom: 10px;font-size:18px;"><?= '沒有相符的商家' ?></h1>
                <a style="margin-bottom: 10px;" href="<?= base_url('sellers') ?>" class="btn btn-main"><?= "前往商家總覽"?></a>
                <a style="margin-bottom: 10px;" href="<?= base_url('products') ?>" class="btn btn-main"><?= "前往產品總覽" ?></a>
            </div>
        <?php } ?>
    </div>
 </section>

And I want to display the seller categories in the element with class seller-list-tag-container with following requirements:
1. Each seller will have their own categories retrieved from server and stored in data-categories in the container, and the data structure is a string and separate each category by comma. (e.g. 分類1,分類2,分類3)
2. The categories display should not exceed the width of whole seller container, and should not be exceed one row. if there are a lot of categories need to be show of seller, the exceeded tags should be collapsed by default, but allows user to view more by click on the + sign tag.

Assuming that I have only the element set and no any css and js. please help to develop the require code.
make sure using the seller-list-tag as the prefix in any element class and id.