Qty Selector

<div id="qtySelector" class="DyFx FxAnIsCr FxJyCtCr">

    <div class="qtyContainer DyFx FxJyCtSeBn Gp10 FxAnIsCr ZIx10 PnLt0 PnBm0 PgLtRt5">
        <span data-action="minus"><i class="CT-MinusCircleSolid CrBk CrurPr FtSe30"></i></span>
        <span data-action="qtyDisplay" class="CrBk CrurPr FtSe30">1</span>
        <span data-action="plus"><i class="CT-PlusCircleSolid CrBk CrurPr FtSe30"></i></span>
    </div>

</div>


document.addEventListener('DOMContentLoaded', function () {

    handleQtyChange('qtySelector');

});

function handleQtyChange(containerId) {

    let qtyContainers = document.getElementById(containerId).querySelectorAll('.qtyContainer');

    qtyContainers.forEach((container, index) => {
        let minusBtn = container.querySelector('[data-action="minus"]');
        let plusBtn = container.querySelector('[data-action="plus"]');
        let qtyDisplay = container.querySelector('[data-action="qtyDisplay"]');

        function generateRandomString(length = 10) {
            const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
            let result = '';
            for (let i = 0; i < length; i++) {
                result += chars.charAt(Math.floor(Math.random() * chars.length));
            }
            return result;
        }

        let qtyDisplayId = generateRandomString();
        qtyDisplay.setAttribute('id', qtyDisplayId);

        minusBtn.addEventListener('click', () => {
            let currentQty = parseInt(qtyDisplay.textContent);
            if (currentQty > 1) {
                qtyDisplay.textContent = currentQty - 1;
            }
        });

        plusBtn.addEventListener('click', () => {
            let currentQty = parseInt(qtyDisplay.textContent);
            qtyDisplay.textContent = currentQty + 1;
        });

        const InitValue = {
            id: qtyDisplayId,
            rows: 5,
            columns: 5,
            width: { mobile: "70vw", tablet: "150px", desktop: "200px" },
            zIndex: 'ZIx10000000000',
            // limit: 20, // maximum quantity limit
            callback: (qty) => {
                qtyDisplay.textContent = qty;
            }
        }

        qtyDisplay.addEventListener('click', () => {
            CT.CeQySr(InitValue)
        })

    });
}