title: Uncaught SyntaxError: Identifier 'Buttons' has already been declared
body: <p>Hello I'm having a small error on my website. I'd like to host the website using github so I linked my scripts in my HTML like this:</p>
  <pre><code>    &lt;script src=&quot;assets/scripts/switch-content.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;assets/scripts/loader.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;assets/scripts/scroll-fade.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;assets/scripts/scroll-top-load.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;assets/scripts/shrinking-header.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;assets/scripts/smooth scroll.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;assets/scripts/burger-menu.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;assets/scripts/card-flip.js&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>and most of them work but for some reason my burger menu for the mobile version and the script that changes the content of the site when clicked on a button won't work.</p>
  <p>Is there any false code here or could it be because of jquery which won't load correctly?
  I tried linking the script separately and like I did below.</p>
  <p>codes that don't work:</p>
  <pre><code>// change activenav class, show the clicked element only and hide the others https://codepen.io/MohdHussein/pen/MWKEvdp
  
  
  // grab all the buttons
  let Buttons = document.querySelectorAll(&quot;.selectSection button&quot;);
  
  // loop through the buttons using for..of 
  for (let button of Buttons) {
    // listen for a click event 
    button.addEventListener('click', (e) =&gt; {
      // et = event target
      const et = e.target;
      // slect activenav class
      const activenav = document.querySelector(&quot;.activenav&quot;);
      // check for the button that has activenav class and remove it
      if (activenav) {
        activenav.classList.remove(&quot;activenav&quot;);
      }
      // add activenav class to the clicked element 
      et.classList.add(&quot;activenav&quot;);
  
      // select all classes with the name content
      let allContent = document.querySelectorAll('.contentsec');
  
      // loop through all content classes
      for (let contentsec of allContent) {
        // display the content if the class has the same data-attribute as the button 
        if (contentsec.getAttribute('data-number') === button.getAttribute('data-number')) {
          contentsec.style.display = &quot;block&quot;;
        }
        // if it's not equal then hide it.
        else {
          contentsec.style.display = &quot;none&quot;;
        }
      }
      this.fade(true); //Call fade method on click 
    });
  }
  </code></pre>
  <pre><code>$('.flip-container .flipper button').click(function() {
    // flip back previous hovered element
    $('.flip-container.hover').toggleClass('hover');
    // flip current element
    $(this).closest('.flip-container').toggleClass('hover');
  });
  
  $('.fbutton').click(function() {
    // flip current element
    $(this).closest('.flip-container').removeClass('hover');
  });
  </code></pre>
  <pre><code>let burger = document.getElementById('burger'),
       nav    = document.getElementById('main-nav'),
       slowmo = document.getElementById('slowmo');
     
  burger.addEventListener('click', function(e){
      this.classList.toggle('is-open');
      nav.classList.toggle('is-open');
  });
  
  $(&quot;.main-nav&quot;).click(function(){
    burger.click();
  })
  </code></pre>