title: jQuery fireing all modal windows at once, even with different target #id
body: <p>Its gonna be simple, I know!! but cant figure out why all my different Modal windows are being called at the same time, even though each nav link as a unique #id link attributed to it.</p>
  
  <p>HTML - NAV</p>
  
  <pre><code>&lt;div id="main" class="faded-in"&gt;
      &lt;h3&gt;
          &lt;a class="js-modal" href="#about"&gt;ABOUT&lt;/a&gt; &amp;bull; 
          &lt;a class="js-modal" href="#music"&gt;MUSIC&lt;/a&gt; &amp;bull; 
          &lt;a class="js-modal" href="#live"&gt;LIVE&lt;/a&gt; &amp;bull;
      &lt;/h3&gt;
  &lt;/div&gt;&lt;!-- end of #main --&gt;
  </code></pre>
  
  <p>HTML - Modal window</p>
  
  <pre><code>&lt;article id="about" class="modal faded-out"&gt;
      &lt;div class="modal-spiel"&gt;
          &lt;p&gt;content&lt;/p&gt;
      &lt;/div&gt;
  &lt;/article&gt;
  
  &lt;article id="live" class="modal faded-out"&gt;
      &lt;div class="modal-spiel"&gt;
          &lt;p&gt;content 2&lt;/p&gt;
      &lt;/div&gt;&lt;!-- end of .modal-spiel --&gt;
  &lt;/article&gt;&lt;!-- end of .modal faded-out --&gt; 
  </code></pre>
  
  <p>css</p>
  
  <p>(modal windows are used a full screen overlay, presenting different page content)</p>
  
  <p>jQuery</p>
  
  <pre><code>}), $(document).ready(function() {
      $(".tubular-mute").click(function() {
          $("a.tubular-mute").toggleClass("tubular-muted")
      }) 
  })),$(".js-modal").click(function() {
      $("header, #main, .modal").toggleClass("faded-in").toggleClass("faded-out")
  }), $(".modal").click(function() {
      $("header, #main, .modal").toggleClass("faded-in").toggleClass("faded-out")
  });
  </code></pre>