Toggling a second menu with ClassieJS or jQuery?

Currently the code is set up to toggle the same menu for every icon.

Here is a fiddle of my current progress http://jsfiddle.net/2Lyttauv/

What I want to achieve is adding a unique menu for each individual icon.

I started by creating the following HTML

<nav class="slider-menu slider-menu-vertical slider-menu-left" id="slider-menu-s1">
            <h3>MENU</h3>
     <a href="#"><span class="icon-flag"></span>Item 1</a>
     <a href="#"><span class="icon-flag"></span>Item 2</a>
            <a href="#"><span class="icon-flag"></span>Item 3</a>
            <a href="#"><span class="icon-flag"></span>Item 4</a>
            <a href="#"><span class="icon-flag"></span>Item 5</a>
      <a href="#"><span class="icon-flag"></span>Item 6</a>
      <a href="#"><span class="icon-flag"></span>Item 7</a>
        </nav>

Now I'd like to add a second menu to

navItem2

the second icon in the sidebar

I've tried creating a second menu using the exact same HTML from above except that I've changed the id="slider-menu-s1 and proceeded to make a separate function but that didn't seemed to work.

If anyone could help or point me in the right direction.

Solution

Here is something that I did.

<nav class="slider-menu slider-menu-vertical slider-menu-left" id="slider-menu-s2">
    <h3>Another Menu</h3>
    <a href="#"><span class="icon-flag"></span>Iteasdfasdfm 1</a>
</nav>

And then notice the id which is slider-menu-s2 so that is what I added in the toggle on the navItemClick which is in here.

        var anotherMenu = document.getElementById( 'slider-menu-s2' );

        navItem2.onclick = function() {
            classie.toggle( this, 'active' );
            classie.removeClass( menuLeft, 'slider-menu-open' ); //this is where you removeClass the other menu to close it
            classie.toggle( anotherMenu, 'slider-menu-open' );
            disableOther( 'navItem2' );
        };

Hope that answers your question.

Here is the jsfiddle http://jsfiddle.net/2Lyttauv/20/