Trying to get a load more button working on an Instagram Instafeed script but it isn't responding in my site

I have an instagram feed integrated into a site I'm updating, I'm using instafeed.js which I have used before and I've set the feed up no problem but I'm trying to integrate a load more button which would load more images below the original set of images.

Even though I've done this before in another site and I'm using the exact same code as I did then, it doesn't want to make the load more button work. Can anyone help me find where I'm going wrong and get the solution?

HTML:

<div class="instagramFeed row">
    <div id="instafeed"></div>

    <p id="mybutton">Load More...</p>

</div>

</div> <!-- end container three -->

CSS:

.instagramFeed {
 padding-bottom: 40px;
 border-bottom: 1px dotted #666666;
}

#instafeed {
 position: relative;
 width: 108%;
 max-width: 108%;
 z-index: 999;
}

#instafeed img {
position: relative;
 width: 20%;
 max-width: 100%;
 margin-right: 4.5%;
 margin-top: 4.5%;
}

#mybutton {
 position: absolute;
 z-index: 999;
}

JS:

var feed = new Instafeed({
target: 'instafeed',
get: 'tagged',
userId: 925022210,
tagName: 'justanotherinvegas',
accessToken: '925022210.467ede5.5d4dff89eb4c464392a859b27f8f43f5',
clientId: 'f1e17875a4214d059676570a91955844',
limit: '12',
sortBy: 'most-recent',
link: 'true',
template: '<a href="{{link}}" target="_blank"><img src="{{image}}" /></a>',
resolution: 'standard_resolution'
});

 // call feed.next() on button click
 $('#mybutton').on('click', function() {
  feed.next();
 });

 feed.run();