为什么我的JQuery弹窗AJAX加载TAB对应分类ID数据，只有第一个分类滚动加载正常，其他分类却加载第一个分类的内容？

// 初始化分类ID currentPage total 
let categoryId = 1, currentPage = 1, total = 0;
// 是否加载中
let isLoading = false;

// 加载分类数据
function loadCategoryData(id, page) {
    $(".tab_item").html('加载中...');
    $(this).addClass('cur').siblings().removeClass('cur');
    loadPageData(id, page);
}

// 监听滚动事件
$('.tab_item').scroll(function () {
    if (isLoading) {
        return;
    }
    //  判断是否滚动到底部距离150px 加载更多
    const scrollTop = $(this).scrollTop();
    const scrollHeight = $(this).prop('scrollHeight');
    const containerHeight = $(this).outerHeight();

    if (scrollHeight - scrollTop - containerHeight < 150) {
        // 滚动到底部距离小于150px，加载更多数据
        currentPage++;
        if (currentPage <= total) {
            loadPageData(categoryId, currentPage);
        }
    }

});

// 模拟个函数，用于加载某一页的数据
function getData(categoryId, page) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            // 随机返回page条数据
            const list = [];
            // 每次返回20条数据
            for (var i = 0; i < 20; i++) {
                list.push({
                    title: '分类:' + categoryId + ',标题:' + i,
                    img_url: 'https://picsum.photos/200/300?random=' + i
                });
            }
            resolve({
                list, // 当前页的数据
                page, // 当前页码
                totalPages: 100 // 后端返回的总页数
            });
        }, 1000);
    });
}

function loadPageData(categoryId, page) {
    // 判断是否正在加载中
    if (isLoading) {
        return;
    }
    isLoading = true;
    getData(categoryId, page).then(({ list, page, totalPages }) => {
        // 更新总页数
        total = totalPages;
        let html = "";
        for (var i = 0; i < list.length; i++) {
            html += '<div>@@##@@<span>"' + list[i].title + '"</span></div>';
        }
        $(".tab_item").append(html);
    }).finally(() => {
        isLoading = false;
    });
}