PHP scroll ajax is not working on mobile but working on localhost or server

I have below code to get more results on page scroll.

It works fine on localhost and on server laptop/desktop. It does not work on mobile and does not load more results on scroll. I cannot figure it out why this is happening or what is causing this not to work on mobile.

<?php
$getItemLID = $dba->prepare('SELECT MAX(id) as id FROM items
where status = ? AND ename like ?');
$getItemLID->bind_param('ss', $status,$param); 
$getItemLID->execute();
$resultLID = $getItemLID->get_result();
$rowLID = $resultLID->fetch_assoc();
$thelastid  =   $rowLID['id'];

    $status = 1;
    $getscategory = $dba->prepare('SELECT * FROM mytable
    where status = ?
    order by id asc');
    $getscategory->bind_param('s', $status); 
    $getscategory->execute();
    $resultGSC = $getscategory->get_result();
    while ($rowGSC = $resultGSC->fetch_assoc()) {
    $scid   = $rowGSC['id'];
    $scename = $rowGSC['ename'];
?>
    <div class="message_box" data-id="<?php echo $scid; ?>" style="padding-right: 5px;">
        <div class="portfolio-item-wrap" style="border-radius: 3%;">
            <span class="portfolio-description">
                    <h3><?php echo $scename; ?></h3>
            </span>
        </div>
    </div>
<?php } ?>
<div id="msg_loaderw" style="display: none;">
<div class="card">
    <div class="card-body">
        <div class="d-flex align-items-center">
            <strong>Loading...</strong>
                <div class="spinner-border ml-auto" role="status" aria-hidden="true">
                </div>
        </div>
    </div>
</div>
</div>
<div id="msg_loader">
</div>

<script>
$(document).ready(function () {
    $(window).scroll(function () {
    var thislastid = "<?php echo $thelastid; ?>";
    if($(window).scrollTop() == ($(document).height() - $(window).height())) {
    $("#msg_loaderw").show();
    var msg_id = $(".message_box:last").data("id");
    $.ajax({
        type: "POST",
        url: "inc/items/search_items_get.php",
        data: {msg_id: msg_id},
        cache: false,
        success: function (data) {
    //Insert data after the message_box 
    $(".message_boxx").append(data);
    if (msg_id == thislastid) {
        $("#msg_loaderw").hide();
        $("#msg_loader").html('<hr><div class="card"><div class="card-body"><div class="align-items-center"><strong><center>That is all what we have for now.</center></strong></div></div></div>');
    }
        }
    });

        }
    });
});
</script>

Below is : inc/items/search_items_get.php

<?php
include ('../default/db.php');
if (isset($_POST['msg_id']) && isset($_POST['msg_id']) !== NULL) {

        $msg_id = $_POST['msg_id'];
        
    $status = 1;
    $limit = 12;

    $getItem = $dba->prepare('SELECT * FROM mytable
    where id > ? AND status = ?
    order by id asc');
    $getItem->bind_param('ss', $msg_id,$status); 
    $getItem->execute();
    $resultItem = $getItem->get_result();
    while ($rowItem = $resultItem->fetch_assoc()) {
    $itemID = $rowItem['id'];
    $itemName = $rowItem['ename'];
?>
    <div class="message_box" data-id="<?php echo $itemID; ?>" style="padding-right: 5px;">
        <div class="portfolio-item-wrap" style="border-radius: 3%;">
            <span class="portfolio-description">
                    <h5><?php echo $itemName; ?></h5>
            </span>
        </div>
    </div>
        <?php
    }
} else {
    echo "Message ID is empty";
}
?>*emphasized text*