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.