My condition doesn't read selected variable
<p>So I'm working on a search page where I have a block that displays the next 10 items in a list. What I want to do is to hide this block when I reached the end of my list.</p>

<pre><code>function loadMore() {
    //Load the content
    var urlPortion = searchQuery.split("?");
    var urlString = "?hits=10&amp;offset=";
    var offset = 0;
    var pageCounter = 1;

    $(".box-footer").click(function () {
        offset += 10;
        pageCounter++;
        var urlBuilder = urlPortion[0] + urlString + offset + "&amp;" + urlPortion[1];

        $.get(urlBuilder, function (data) {
            var content = $(".search-result-list li", data);
            $('.search-result-list').append(content);
        });
    });

    //Visibility of "Show more"-bar
    var textString = $(".search-result-totalhits").html();
    var totalHitsString = /\d+/;
    var totalHits = textString.match(totalHitsString);
    var numberOfPages = (Math.ceil(totalHits/10));

    if ((totalHits &gt; 10) &amp;&amp; (pageCounter &lt; numberOfPages)) {
        $(".p-sok .box-footer").show();
    }
    else {
        $(".p-sok .box-footer").hide();
    }
};
</code></pre>

<p>My problem here is that the last condition that does the actual check whether to display the block or not always remains true. I'm guessing that the variable "pageCounter" isn't available outside the click function above, but I am not sure. I've tried to output the variable to the console in line 18 but it does not output anything.</p>

<p>Someone care to give me som hints?</p>
