Pagination Disappears on Page Change

[GuardianMajor]

I am using bootpag as of today (thank you for making it) as standalone inside a Wordpress page. On this page I have a series of photos inside a hidden <div style="display:none;"> and child items <div class="photo"> where the pagination is applied to the array or photos, not actual pages, we stay on a single page.

The implementation is sound, I believe, but for some reason when the pagination is initiated, it won't show the first page, it would be nice when you set a page: 1, that it actually loads that dynamic content but it doesn't, which was an easy fix (see below) until such time as it becomes a default behavior (here is hoping). However, with this fix, the pagination is never created or shown; and without it the pagination gets created but when you click on the next page, it loads the content but the pagination disappears.

This is my code:

<div id="content"><img src="loading.gif" class="aligncenter"  /></div>
<div id="page-selection" style="text-align: center;"></div>

<script>
    this.$ = this.jQuery = jQuery.noConflict(true);
    $(document).ready(function() {
        var arrPics = $('div.photo');
        $("#content").html(arrPics[0].innerHTML);
        // init bootpag
        $('#page-selection').bootpag({
            total: arrPics.length,
            page: 1,
            maxVisible: 10,
            leaps: true,
            firstLastUse: true,
            first: '←',
            last: '→',
            wrapClass: 'pagination',
            activeClass: 'active',
            disabledClass: 'disabled',
            nextClass: 'next',
            prevClass: 'prev',
            lastClass: 'last',
            firstClass: 'first'
        }).on("page", function(event, num){
            $("#content").html(arrPics[num-1].innerHTML);
        });
    }); 
</script>

Problem:

With the line $("#content").html(arrPics[0].innerHTML); pagination never shows up, removing it will make the pagination show up but only loading spinner and no first page content. Changing the page will load the next item but the pagination disappears - along with the rest of the page except the content DIV.

Any idea what's wrong here? Thank you in advance.

[GuardianMajor]

I believe I figured it out and now its working fine. The problem was a conflict with the use of <div id="content"> and therefore when the HTML was replaced, it would replace the more senior content div and therefor everything would vanish. I changed it to <div id="page-content"> and it fixed the issue. Can't believe almost an hour+ of debugging went into seeing this, I am somewhat ashamed actually, I should have considered and caught that. But hopefully it will serve to help someone else down the line.