JS issue

[Mekaboo]

Hey!!
I added an infinite scroll to my code but its not working…just shows the loading.gif. The purpose of this is to create a timeline similar to Facebook(people make post then its pushed downward and combined with other posts) I believe its an issue within the JS…here is my code. I asked in another section but didn’t get a response so i thought why not try here :

PHP/HTML

 <div class="post-wall">
        <div id="post-list">
            <?php
            require_once ('lib/DataSource.php');
            $sqlQuery = "SELECT * FROM tbl_member";
            $result = mysqli_query($conn, $sqlQuery);
            $total_count = mysqli_num_rows($result);
            
            $sqlQuery = "SELECT * FROM tbl_member ORDER BY id DESC LIMIT 7";
            $result = mysqli_query($conn, $sqlQuery);
            ?>
            <input type="hidden" name="total_count" id="total_count"
            value="<?php echo $total_count; ?>" />

            <?php
            while ($row = mysqli_fetch_assoc($result)) {
                $card = substr($row['card'], 0, 100);
                ?>
               <div class="card">
                <div class="card-header">
					<div class="d-flex justify-content-between align-items-center">
						<div class="d-flex justify-content-between align-items-center">
							<div class="mr-2">
								<img class="rounded-circle" width="45" src="<?= $image ?>" width="30px" height="30px"  >
							</div>
							<div class="ml-2">
								<div class="h5 m-0">@<?php echo $post['username']; ?></div>
								<div class="h7 text-muted"><?php echo $post['name']; ?></div>
							</div>
						</div>							
					</div>
				</div> 
  <div class="card-body">
    <div class="post-item" id="<?php echo $row['id']; ?>">
 <p class="post-filetoUpload"> <?php echo($_POST['fileToUpload']); ?>;
<p class="post-comment"> <?php echo($_POST['comment']); ?>;
<p class="post-page_url">  <?php echo($_POST['page_url']); ?>;
  <div class="form-floating">
  <textarea class="form-control" placeholder="Comment here" id="floatingTextarea"></textarea>
</div>      
    </div>
                <?php
                }
                ?>
            </div>
            <div class="ajax-loader text-center">
                <img src="LoaderIcon.gif"> Loading more posts...
            </div>
    </div>
     </div>
  </div>
    ```

$(document).ready(function(){
        windowOnScroll();
});
function windowOnScroll() {
       $(window).on("scroll", function(e){
        if ($(window).scrollTop() == $(document).height() - $(window).height()){
            if($(".post-item").length < $("#total_count").val()) {
                var lastId = $(".post-item:last").attr("id");
                //getMoreData(lastId);
            }
        }
    });
}

function getMoreData(lastId) {
       $(window).off("scroll");
    $.ajax({
        url: 'getMoreData.php?lastId=' + lastId,
        type: "get",
        beforeSend: function ()
        {
            $('.ajax-loader').show();
        },
        success: function (data) {
        	   setTimeout(function() {
                $('.ajax-loader').hide();
            $("#post-list").append(data);
            windowOnScroll();
        	   }, 1000);
        }
   });
}