Pagination logic shows incorrect page numbers

I have been trying to resolve this issue and can't seem to fix it and am a little unsure what is wrong - I didn't write the code initially.

The code below is meant to show 20 results per page - that works ok. However there is always an extra page number over and above what there should be. So if there should be page numbers 1 to 5 - there is page numbers one to six and the sixth page has no results. It works fine if there is less than 20 results - just when over multiple pages where the problem appears.

Here's the code:

<script>
var js_array = <?php print json_encode($array);?> ;
//alert(1);
//alert(js_array[0]);
for (i=0; i<20; i++)
{
    //alert(js_array[i]);
    $('#canvas').append(js_array[i]);
}


var end = document.createElement('div');
end.innerHTML = '<b><?php echo $pagewords; ?></b> ';
//alert(js_array.length/15);
var pages = Math.min(Math.round(js_array.length/15), 10);
for (i=1; i<pages; i++)
{   
    var span = document.createElement('span');
    $(span).attr('id', 'span');
    $(span).css('cursor','pointer');
    span.innerHTML = i;
    $(end).append(span);
    $(end).append('  ');

}
$(end).addClass("<?php echo $pageclass; ?>");
$('#main').append(end);

$('span').click(function(){
    //alert($(this).html());
    var page = $(this).html();
    //alert(page);
    $('#canvas').empty();
    if (page==0)
    {
        for (i=0; i<20; i++)
        {
            //alert(js_array[i]);
            $('#canvas').append(js_array[i]);
        }
    }
    else
    {
        for (i=page*20-20; i<page*20; i++)
        {
            //alert(js_array[i]);
            $('#canvas').append(js_array[i]);
        }
    }


});

Can anyone see a problem with the logic of the above.

Thanks in advance for any help!