Javascript simple value if statement fails on 4th run through [duplicate]

This question already has an answer here:

• jquery: i have to use parseInt() even when deal with numbers, why? 4 answers

I am trying to use AJAX, JQuery, and Javascript to dynamically load data for a webpage, adding data once the user hits the bottom of the page. I am new to AJAX and Javascript, so forgive me if I'm missing something simple. From what I understand, the if statement in question is simply comparing the value of two variables. It succeeds a 4 times, then fails.

This is the code I currently have to test this:

$(window).scroll(function(){
    if ($(window).scrollTop() == $(document).height() - $(window).height()){
        console.log("Pagenum: "+$(".pagenum:last").val());
        console.log("Totalpage: "+$(".total-page").val());

        if($(".pagenum:last").val() <= $(".total-page").val()) {
            var pagenum = parseInt($(".pagenum:last").val()) + 1;
            console.log("Success!: "+pagenum);
            getresult('getresult.php?page='+pagenum+'&dir='+"<?php echo $project; ?>");
        }
    }
});

The console.log outputs are simply for testing purposes. The problem I am having is with the second if statement:

if($(".pagenum:last").val() <= $(".total-page").val())

This is what the console output looks like when the user is interacting with this page:

Pagenum: 1
Totalpage: 37
Success!: 2

Pagenum: 2
Totalpage: 37
Success!: 3

Pagenum: 3
Totalpage: 37
Success!: 4

Pagenum: 4
Totalpage: 37

Pagenum: 4
Totalpage: 37

Pagenum: 4
Totalpage: 37

Pagenum: 4
Totalpage: 37

Pagenum: 4
Totalpage: 37

I cannot find a reason that this comparison between the value of pagenum and the value of total-page would fail after the 4th page, as the console seems to know the correct values of each.

QUESTION: Is there any reason that this might be happening, and how should I go about fixing it?

If there is any more information I can provide, or anything I can clarify, please comment and I will edit the question as best as I can.