Use js function twice on same page

Question

I use this javascript to paginate content between two div's. The pagination works great. But if I use the function twice on the same page, only one pagination shows up. I tried to rename the functions but that didn't helped. I know this may be a basic question but I didn't found a solution myself... any help is much apreciated.

$(document).ready(function(){

    var show_per_page = <?php echo json_encode($itemspp); ?>; 
    var number_of_items = $('#content').children().size();
    var number_of_pages = Math.ceil(number_of_items/show_per_page);

    $('#current_page').val(0);
    $('#show_per_page').val(show_per_page);

    var navigation_html = '<a class="previous_link" href="javascript:previous();">Vorige</a>';
    var current_link = 0;
    while(number_of_pages > current_link){
        navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';
        current_link++;
    }
    navigation_html += '<a class="next_link" href="javascript:next();">Volgende</a>';

    $('#page_navigation').html(navigation_html);
    $('#page_navigation .page_link:first').addClass('active_page');
    $('#content').children().css('display', 'none');
    $('#content').children().slice(0, show_per_page).css('display', 'block');

});

function previous(){

    new_page = parseInt($('#current_page').val()) - 1;
    if($('.active_page').prev('.page_link').length==true){
        go_to_page(new_page);
    }

}

function next(){
    new_page = parseInt($('#current_page').val()) + 1;
    if($('.active_page').next('.page_link').length==true){
        go_to_page(new_page);
    }

}
function go_to_page(page_num){
    var show_per_page = parseInt($('#show_per_page').val());
    start_from = page_num * show_per_page;
    end_on = start_from + show_per_page;
    $('#content').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');
    $('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page');
    $('#current_page').val(page_num);
}

Answer 1

Assuming that you have tried to use two elements with the same id of "page_navigation", you cannot do that because each id is required to be unique.

All that you need to do is create a different id for each page navigation element, say "page_navigation_1" and "page_navigation_2". Then you just need to modify your code like this:

$('#page_navigation_1').html(navigation_html);
$('#page_navigation_1 .page_link:first').addClass('active_page');
$('#page_navigation_2').html(navigation_html);
$('#page_navigation_2 .page_link:first').addClass('active_page');

However, it could be that your page content is so short (for example, you have just one row of items) that it does not look good to have to have two page navigation elements. In that case, you could simply not set one or the other.

Edit: If you have a lot of items to display, it could be more efficient to do the pagination logic server-side because, as it is, you appear to be sending all the items for every page.