How to append new record below existing record when reach bottom of scroll for selected DIV

I have Java script code as below I want to do that when I scroll #user-list-body and reach at bottom then append more data as per set limit

let active_chat_room_id = '';
let sort_id = 1; // 1 : Newest, 2 : Latest
let filter_id = 0; // Depends on user role, 0 : All
let chat_status = 1;  // 1 : Open chats, 2 : Closed chats


window.onload = function() {
    fngGetUserListWithMessage(sort_id,filter_id,chat_status);
};
jQuery(function($) {
    $('#user-list-body').bind('scroll', function() {
        var element = $(this);
        var scrollTop = element.scrollTop();
        var innerHeight = element.innerHeight();
        var scrollHeight = element[0].scrollHeight;

        // Check if the user has scrolled to the bottom
        if (scrollTop + innerHeight >= scrollHeight - 1) {
            // alert('end reached');
            console.log('end_reached');  
            fngGetUserListWithMessage(sort_id,filter_id,chat_status);
        }
    });
});

function fngGetUserListWithMessage(sort_id,filter_id,chat_status)
{   
    $('.chat_list_cls').addClass('loader_chat_list');
    (async () => {
        const conversations_query = db.collection('conversations').orderBy('lastMessage.timestamp', 'desc').limit(5);
        const snapshot = await conversations_query.get();
        let firestore_data = [];
        snapshot.forEach(doc => {
            firestore_data.push(doc.data());
        });
        console.log('BaseURLToken=> ',BaseURLToken);
        let result_data = [];
        console.log("call 1 =>getChatUserList");
        $.ajax({
            url:BaseURL+"/getChatUserList",
            type:"post",
            async:false,
            data:{"_token":BaseURLToken,sort_id:sort_id,filter_id:filter_id,chat_status:chat_status,firestore_data : firestore_data},
            success:function(result)
            {  
                if(result.success == true)
                {
                    if(result.data.length > 0)
                    {
                        result_data = result.data;
                    }
                }
            }
        });
        console.log("result_data=> " + result_data.length);
        if(result_data.length > 0)
        {
            active_chat_room_id = localStorage.getItem("active_chat_room_id");
            // console.log('active_chat_room_id_1',active_chat_room_id);
            let active_index = result_data.findIndex(result_data => result_data.chat_room_id === active_chat_room_id);
            // console.log('active_index',active_index);
            // console.log('result_data',result_data);
            if(active_index < 0)
            {
                active_index = 0;
                active_chat_room_id = result_data[0].chat_room_id;
                localStorage.setItem("active_chat_room_id",active_chat_room_id);
            }
            // console.log('active_chat_room_id_2',active_chat_room_id);
            fnLoadUserList(result_data);
            fnLoadUserHeader(result_data[active_index],active_chat_room_id);
            fnLoadUserMessage(result_data[active_index],active_chat_room_id);
            fnSetActiveUser(active_chat_room_id);
        }
        else
        {
            $('.chat_list_cls').removeClass('loader_chat_list');
            $('#user-list-body').html(noUserListFound());
            $('#message-body').html(noChatsFound());
            $('#chat_main_header').hide();
            $('#chat_input').hide();
        }
    })();
}

function fnLoadUserList(result)
{
    $('.chat_list_cls').addClass('loader_chat_list');
    let list_body = '<div class="chat_list_cls loader_chat_list"><ul class="list-inline m-0 p-0">';
    $.each(result, function(index, obj)
    {
        let timestamp = '';
        if(obj.last_message_timestamp != "" && obj.last_message_timestamp != null)
        {
            timestamp = getTimeIn12HourFormat(obj.last_message_timestamp);
        }
        // console.log('timestamp',timestamp);
        let last_msg = getLastMessage(obj.last_message,obj.content_type);
        let user_type_sc = getUserTypeShortCode(obj.user_type,timestamp,'list');
        
        let backg = '';
        let user_profile_img = obj.username.split(' ').map(name => name[0]).join('').toUpperCase();
        if(obj.unread_message_count <= 0)
        {
            backg = '#E2E3E6';
        }
        let onclick = "onclick='fnChatUserDetail("+JSON.stringify(obj)+","+index+");'";
       
        list_body += '<li class="d-flex align-items-center user_list_li  user_chat_room_'+obj.chat_room_id+'" id="user_list_id_'+index+'" style="background:'+backg+'">\
                        <div class="col-lg-2">\
                            <a href="'+BaseURL+'/members/'+obj.user_id+'/edit"><div class="profileImage">'+user_profile_img+'</div></a>\
                        </div>\
                        <div class="col-lg-6">\
                            <a id="user_list_div_'+obj.chat_room_id+'" href="javascript:void(0);" '+onclick+'>\
                                <div class="flex-grow-1">\
                                    <div class="d-flex align-items-center">\
                                        <h6 class="green_user_'+obj.chat_room_id+'">'+obj.username+'</h6>';
                                        if(obj.unread_message_count > 0)
                                        {
                                            list_body += '<span id="green_span_'+obj.chat_room_id+'" style="display: block;margin-left: 7px;margin-bottom:2%;" >\
                                                            <svg class="text-success" width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">\
                                                                <circle cx="5" cy="5" r="5" fill="currentColor"></circle>\
                                                            </svg>\
                                                        </span>';
                                        }
                                    list_body += '</div>\
                                    <p class="mb-0 wrap_text" id="user_list_msg_'+obj.chat_room_id+'">'+last_msg+'</p>\
                                </div>\
                            </a>\
                        </div>';
        list_body += user_type_sc;
        list_body +='</li>'; 
    });
    list_body += '</ul></div>';
    $('#user-list-body').html(list_body);
    
    // fnSetActiveUser(active_li);
    $('.chat_list_cls').removeClass('loader_chat_list');
}