Best way to bind button click to an Array Prototype .slice in a separate div?

Question

Cheers, first post..lurked and learned for a few years now... I've encountered a bit of an issue when attempting to bind a button click to another function- mainly because the function seems to be an Array.prototype. My JS Fiddle example.

I put this grid animation inside of a slider (and all is working well), except I'm trying to run the loading animation by clicking on a link outside of the grid (i.e. located in a sidebar). Imagine the sidebar on the left, and the grid on the right. screenshot: "click mee!" should ALSO trigger loading bar animation on right

I've played around with creating new variables (using the existing logic) duplicating the existing function, for example:

function initEvents() {
gridEl = document.getElementById('theGrid'), // default
nongridEl = document.getElementById('NotIntheGrid')  // my addition

....etc...
gridItems = gridItemsContainer.querySelectorAll('.grid__item'),
nongridItems = gridItemsContainer.querySelectorAll('.makeitanimate'),

// (incomplete for explanation, please reference fiddle.)

    [].slice.call(gridItems).forEach(function(item, pos) {
       // grid item click event
       item.addEventListener('click', function(ev) {
        ev.preventDefault();
        if(isAnimating || current === pos) {
         return false;
        }
                isAnimating = true;
    // index of current item
    current = pos;
    // simulate loading time..
    classie.add(item, 'grid__item--loading');
    ....etc...

    [].slice.call(nongridItems).forEach(function(item, pos) {
       // grid item click event
       item.addEventListener('click', function(ev) {
        ev.preventDefault();
        if(isAnimating || current === pos) {
         return false;
        }
    ....etc...
   

However, since "item" was predefined as "this" (earlier in the .js file) classie.js only adds "grid__item--loading" class to the gridItems loading animation.. When "item" is used for the nongridItems the function completes, but classie adds the loading class to the button itself-- I could have two loading events, one per side, but ideally I'd like both links to trigger the same loading animation, in the same place, for gridItems

I'd like to click on nongridItems a.k.a. $("a.makeitanimate"), and have that function run the same thing that gridItems does. I've tried defining everything as a function, and running that on "click" for nongridItems, but that doesn't work.

classie.add(item**, 'grid__item--loading');
 setTimeout(function() {
classie.add(**this should reference gridItemsitem**, 'grid__item--animate');

I'm assuming that I may need to redefine 'item', or similar as a callback for the nongridItems function. I've tried calling (gridItems && nongridItems), but that's clearly wrong logic. Would it make more sense to bind this button click to the initEvents(); function?

function init() {
 initEvents();
}

Or would it be wiser to reference the entire function (with variables for theGrid) and try to run this if nongridItems is clicked?

Sorry if this doesn't make sense or terminology is wrong, the fiddle may help you visualize the problem.

I can hack together some basic jQuery that achieves what I want (using addClass instead of classie.add, etc..), but it doesn't work with "item" being referenced throughout the function (loadContent, and hideContent)... also I know there's a cleaner way to use the existing code and variable structure, but I can't quite get it.

Thanks in advance!