Bootstrap menu toggle not working with multiple toggle links

Question

I have a functional side navigation that toggles in and out of display. Here is the "Filter" button...

<a href="#menu-toggle" style="background-color:black; color:white;" class="btn btn-default page-header" id="menu-toggle">
   <span style="position:relative; top:2px; right: 5px;"class="glyphicon glyphicon-resize-horizontal"></span>
                        Filter</a>

and the JQuery...

<script>
    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    });
</script>

When I add another clickeable link to toggle the same menu it breaks down but I can't understand why? I've changed the menu-toggle id to a class but that didn't help.

Here is the code that doesn't work ie the second clickable link that should give the same toggle effect...

<li class="sidebar-brand">
     <a href="#" id="menu-toggle">Collapse
     </a>
</li> 

Answer 1

Add a class instead of an ID for multiple elements being operated on.

$(".menu-toggle").click(function(e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled");
});

Change <a id="menu-toggle"></a> to <a class="menu-toggle"></a>