title: Jquery mulitple buttons with same name triggers event for multiple classes with same name
body: <p>I'm having some problems firing an event.</p>
  
  <p>I have this button called: <code>.read-more</code> and it says.. when clicked <code>.read-more</code>--> <code>.audio h1</code> do this event and <code>.sc-player</code> do this event. That works..
  but now all <code>.audio h1</code> and all the <code>.sc-player</code> classes on the page are doing the same event</p>
  
  <p>jquery:</p>
  
  <pre><code>$(".read-more").click(function(event) {
     $('.audio h1').transition({ y: -150, delay: 400 }, 600, 'easeInOutQuint');
     $('.sc-player').transition({ y: 200, delay: 700 }, 600, 'easeInOutQuint'); 
  });
  </code></pre>
  
  <p>so my html looks something like this</p>
  
  <pre><code>&lt;section class="scrollsections"&gt;
          &lt;div class="content"&gt;
              &lt;div class="audio"&gt;
                  &lt;h1&gt;name&lt;/h1&gt;
                  &lt;div class="sc-player"&gt;
                         &lt;a href="https://soundcloud.com/qviotky/daft-punk-get-lucky-qviotky"&gt;&lt;/a&gt;
                   &lt;/div&gt;
                  &lt;a class="read-more"&gt;Read more&lt;/a&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;div class="overlay"&gt;&lt;/div&gt;
  
  &lt;/section&gt;
  
  
  &lt;section class="scrollsections"&gt;
          &lt;div class="content"&gt;
              &lt;div class="audio"&gt;
                  &lt;h1&gt;name&lt;/h1&gt;
                  &lt;div class="sc-player"&gt;
                         &lt;a href="https://soundcloud.com/ferrarifatts/14-choppa-feat-a-ap-rocky"&gt;&lt;/a&gt;
                   &lt;/div&gt;
                  &lt;a class="read-more"&gt;Read more&lt;/a&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;div class="overlay"&gt;&lt;/div&gt;
  
  &lt;/section&gt;
  </code></pre>
  
  <p>Now when i click .read-more.. the .audio h1 and .sc-player will start animating.. but also the .audio h1 and .sc-player in the next <code>&lt;section&gt;</code> are animated..</p>
  
  <p>Is there a way i can add the event for just that particular section?</p>