title: Multiple HTML elements with same ID causing errors
body: <p>I'm currently running into a problem where inside my HTML document, I have a carousel, and inside each slide a new button shows up, all doing the same thing. Each one of these buttons is a navbar-toggle button, which displays a navbar if it is pressed.</p>
  
  <p>I problem I'm having is that in the code I was given, it only accounts for one of these buttons to work, the first one to load, as it declares the variable by <code>var showRightPush = document.getElementByID</code>. The problem is that I want to be able to click this button on every slide.</p>
  
  <p>Below is my code, the old code, as well as the code in the full context.
  Thanks.</p>
  
  <p><strong>MY CODE</strong></p>
  
  <pre><code>&lt;script&gt;
    var menuRight = document.getElementById( 'cbp-spmenu-s2' ),
      showRightPush = document.getElementsByClassName( 'navbar-toggle' ),
      body = document.body;
  
  
    showRightPush.onclick = function() {
      classie.toggle( this, 'active' );
      classie.toggle( body, 'cbp-spmenu-push-toleft' );
      classie.toggle( menuRight, 'cbp-spmenu-open' );
      disableOther( 'navbar-toggle' );
    };
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>OLD CODE</strong></p>
  
  <pre><code>&lt;script&gt;
    var menuRight = document.getElementById( 'cbp-spmenu-s2' ),
      showRightPush = document.getElementById( 'showRightPush' ),
      body = document.body;
  
  
    showRightPush.onclick = function() {
      classie.toggle( this, 'active' );
      classie.toggle( body, 'cbp-spmenu-push-toleft' );
      classie.toggle( menuRight, 'cbp-spmenu-open' );
      disableOther( 'showRightPush' );
    };
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>FULL CODE</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="author" content=""&gt;
  
      &lt;title&gt;&lt;?php bloginfo('name'); ?&gt; &lt;/title&gt;
  
      &lt;!-- Bootstrap core CSS --&gt;
      &lt;link href="&lt;?php bloginfo('template_directory'); ?&gt;/css/bootstrap.css" rel="stylesheet"&gt;
  
      &lt;!-- Sidebar core CSS --&gt;
      &lt;link href="&lt;?php bloginfo('template_directory'); ?&gt;/css/simple-sidebar.css" rel="stylesheet"&gt;
  
      &lt;!-- Add custom CSS here --&gt;
      &lt;link href="&lt;?php bloginfo('template_directory'); ?&gt;/style.css" rel="stylesheet"&gt;
      &lt;link href="&lt;?php bloginfo('template_directory'); ?&gt;/css/default.css" rel="stylesheet"&gt;
      &lt;link href="&lt;?php bloginfo('template_directory'); ?&gt;/css/component.css" rel="stylesheet"&gt;
  
    &lt;/head&gt;
  
  &lt;body class="cbp-spmenu-push"&gt;
  
        &lt;nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s2"&gt;
          &lt;h3&gt;&lt;?php bloginfo('name'); ?&gt;&lt;/h3&gt;
          &lt;a href="#"&gt;About&lt;/a&gt;
          &lt;a href="#"&gt;Submit&lt;/a&gt;
          &lt;a href="#"&gt;Subscribe&lt;/a&gt;
          &lt;a href="#"&gt;Follow&lt;/a&gt;
          &lt;a href="#"&gt;Contact&lt;/a&gt;
        &lt;/nav&gt;
  
  
        &lt;?php 
       $number = 0; 
       query_posts(array('post_type' =&gt; 'facts')); 
       if(have_posts()):  
      ?&gt;
      &lt;div id="myCarousel" class="carousel slide"&gt;
        &lt;ol class="carousel-indicators"&gt;
          &lt;?php while(have_posts()): the_post(); ?&gt;
            &lt;li data-target="#myCarousel" data-slide-to="&lt;?php echo $number++; ?&gt;"&gt;&lt;/li&gt;
          &lt;?php endwhile; ?&gt;
        &lt;/ol&gt;
  
        &lt;!-- Carousel items --&gt;
        &lt;div class="carousel-inner"&gt;
          &lt;?php while(have_posts()): the_post(); ?&gt;
  
          &lt;div class="item"&gt;
            &lt;nav class="navbar navbar-top navbar-inverse visible-xs &lt;?php foreach(get_the_category() as $category) {echo $category-&gt;slug;} ?&gt;" role="navigation"&gt;
            &lt;div class="container"&gt;
              &lt;div class="navbar-header"&gt;
                &lt;button type="button" id="showRightPush" class="btn btn-default navbar-toggle" &gt;
                  &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                &lt;/button&gt;
                &lt;a class="navbar-brand" href="#"&gt;&lt;img src="&lt;?php bloginfo('template_directory'); ?&gt;/images/brains.png" alt=""&gt; &lt;/a&gt;
              &lt;/div&gt; &lt;!-- end navbar-header --&gt;
            &lt;/div&gt; &lt;!-- end container --&gt;
            &lt;/nav&gt; &lt;!-- end navbar --&gt;
  
            &lt;nav class="navbar navbar-fixed-bottom navbar-inverse visible-xs bottom-nav-colour" role="navigation"&gt;
              &lt;div class="container"&gt;
                &lt;div class="navbar-header text-center"&gt;
                  &lt;ul class="bottom-directions"&gt;
                    &lt;li&gt;&lt;a href="#myCarousel" class="bottom-arrow-nav" data-slide="prev"&gt;&lt;img src="&lt;?php bloginfo('template_directory'); ?&gt;/images/prev.png" alt=""&gt;&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#myCarousel" class="bottom-arrow-nav" data-slide="random"&gt;&lt;img src="&lt;?php bloginfo('template_directory'); ?&gt;/images/random.png" alt=""&gt;&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#myCarousel" class="bottom-arrow-nav no-border-right" data-slide="next"&gt;&lt;img src="&lt;?php bloginfo('template_directory'); ?&gt;/images/next.png" alt=""&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;ul&gt;
                &lt;/div&gt; &lt;!-- end navbar-header --&gt;
              &lt;/div&gt;&lt;!-- /.container --&gt;
            &lt;/nav&gt; &lt;!-- end navbar --&gt;
  
            &lt;div class="fact-number-container &lt;?php foreach(get_the_category() as $category) {echo $category-&gt;slug;} ?&gt;"&gt;
              &lt;div class="container"&gt;
                &lt;div class="fact-header"&gt;
                  &lt;h3&gt;/Fact &lt;span class="fact-number"&gt;&lt;?php echo(types_render_field("fact-number", array())); ?&gt;&lt;/span&gt;&lt;/h3&gt;
                &lt;/div&gt; &lt;!-- end fact-header --&gt;
              &lt;/div&gt; &lt;!-- end container --&gt;
            &lt;/div&gt; &lt;!-- end fact-number-container --&gt;
  
            &lt;div class="fact-text-container"&gt;
              &lt;div class="container"&gt;
                &lt;div class="fact-text"&gt;
                  &lt;p&gt;&lt;?php echo(types_render_field("fact-text", array())); ?&gt;&lt;/p&gt;
                &lt;/div&gt; &lt;!-- end fact-text --&gt;
              &lt;/div&gt; &lt;!-- end container --&gt; 
            &lt;/div&gt; &lt;!-- end fact-text-container --&gt;
  
            &lt;div class="tweet-this-container"&gt;
              &lt;div class="container"&gt;
                &lt;a href="#"&gt; 
                  &lt;div class="tweet-this "&gt;
                    &lt;p&gt;&lt;img src="&lt;?php bloginfo('template_directory'); ?&gt;/images/twitter.png" alt=""&gt;Share this fact like a champ&lt;/p&gt;
                  &lt;/div&gt; &lt;!-- end tweet-this --&gt;
                &lt;/a&gt; 
              &lt;/div&gt; &lt;!-- end container --&gt;
            &lt;/div&gt; &lt;!-- end tweet-this-container --&gt;
          &lt;/div&gt; &lt;!-- end item --&gt;
          &lt;?php endwhile; ?&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;?php endif; wp_reset_query(); ?&gt;
  
  
  
      &lt;!-- Bootstrap core JavaScript --&gt;
      &lt;!-- Placed at the end of the document so the pages load faster --&gt;
      &lt;!-- Make sure to add jQuery - download the most recent version at http://jquery.com/ --&gt;
      &lt;script src="&lt;?php bloginfo('template_directory'); ?&gt;/js/jquery.js"&gt;&lt;/script&gt;
      &lt;script src="&lt;?php bloginfo('template_directory'); ?&gt;/js/bootstrap.js"&gt;&lt;/script&gt;
      &lt;script src="&lt;?php bloginfo('template_directory'); ?&gt;/js/classie.js"&gt;&lt;/script&gt;
      &lt;script src="&lt;?php bloginfo('template_directory'); ?&gt;/js/modernizr.custom.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="//use.typekit.net/gyv3ykj.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;try{Typekit.load();}catch(e){}&lt;/script&gt;
  
      &lt;script&gt;
        var menuRight = document.getElementById( 'cbp-spmenu-s2' ),
          showRightPush = document.getElementsByClassName( 'navbar-toggle' ),
          body = document.body;
  
  
        showRightPush.onclick = function() {
          classie.toggle( this, 'active' );
          classie.toggle( body, 'cbp-spmenu-push-toleft' );
          classie.toggle( menuRight, 'cbp-spmenu-open' );
          disableOther( 'navbar-toggle' );
        };
  
  
      &lt;/script&gt;
      &lt;script&gt;
      jQuery(document).ready(function(){
        $(".carousel-indicators li:first").addClass("active");
        $(".carousel-inner .item:first").addClass("active");  
      });
      &lt;/script&gt;
  
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>