jPanelMenu-menu renders 3 times

[KeeyaWangJones]

Hi,
I was wondering if anyone knows why I would be getting an jPanelMenu-panel render of 3x's in the html (in the Browser) if you view the source. I only have it one time in my code.
My links are images instead.

HTML Structure
<header class="main">
<h1 class="logo">Title of Image Here</h1>
<a href="#menu" class="menu-trigger ss-icon">&#xED50;</a>
<nav>
<h1 class="logo">Title of Image Here</h1>
<div id="sideGridView">
<ul id="photos">
<li><img src="http://placehold.it/282x206/cf5" data-lgimg="http://placehold.it/360x400/cf5"/></li>
<li><a href="#"><img src="http://placehold.it/282x206/gh4" data-lgimg="http://placehold.it/360x400/gh4"/></a></li>
<li><a href="#"><img src="http://placehold.it/282x206/ff0" data-lgimg="http://placehold.it/360x400/ff0"/></a></li>
<li><a href="#"><img src="http://placehold.it/282x206/asd" data-lgimg="http://placehold.it/360x400/asd"/></a></li>
<li><a href="#"><img src="http://placehold.it/282x206/ddf" data-lgimg="http://placehold.it/360x400/ddf"/></a></li>
<li><a href="#"><img src="http://placehold.it/282x206/444" data-lgimg="http://placehold.it/360x400/444"/></a></li>
<li><a href="#"><img src="http://placehold.it/282x206/eee" data-lgimg="http://placehold.it/360x400/eee"/></a></li>
<li><a href="#"><img src="http://placehold.it/282x206/bbb" data-lgimg="http://placehold.it/360x400/bbb"/></a></li>
</ul>
</div>
</nav>
</header>

'The JavaScript:`

var jPanelMenu = {};

jPanelInit = (function () {

`$('pre').each(function(i, e) {hljs.highlightBlock(e)});

jPanelMenu = $.jPanelMenu({
    menu: 'header.main nav',
    duration: 300,
    openPosition:'320px',
    direction: 'left',
    clone: false
});

var jR = jRespond([
    {
        label: 'small',
        enter: 0,
        exit: 800
    },{
        label: 'large',
        enter: 800,
        exit: 10000
    }
]);

jR.addFunc({
    breakpoint: 'small',
    enter: function() {
        jPanelMenu.on();
        $(document).on('click',jPanelMenu.menu + ' li a',function(e){
            if ( jPanelMenu.isOpen() && $(e.target).attr('href').substring(0,1) == '#' ) { jPanelMenu.close(); }
        });
    },
    exit: function() {
        jPanelMenu.off();
        $(document).off('click',jPanelMenu.menu + ' li a');
    }
});

});

jPanelInit();

[KeeyaWangJones]

Closing this issue. I found my mistake. I was jPanelInit(); too many times. In the js, in the html, and I didn't need too.