title: Make function work on each element separately
body: <p>I'm creating a wordpress element that will show post excerpts in a carousel. To demonstrate what I am doing I've created a github repository with a html version of the carousel.</p>
  
  <p><a href="https://github.com/dingo-d/Post-Excerpt-Carousel" rel="nofollow">https://github.com/dingo-d/Post-Excerpt-Carousel</a></p>
  
  <p>The carousel is working mostly fine, but I have an issue that I don't understand where it's coming from. When I have one carousel on a page, all is working fine. But what if there are two or more on the same page?</p>
  
  <p>What happens is that when you click on next icon, the slider where you've clicked it will move to the left, and the classes will switch from one item to another list item (active class), but those classes will move on all carousels on the site (there is a html file with multiple carousels on repo).</p>
  
  <p>I've created a function that will manage the movement and clicking, and I'm calling it like this:</p>
  
  <pre><code>$('.post_excerpt_carousel').each(function(){
      var $this = $(this);
      post_excerpt_positioning($this);
  });
  </code></pre>
  
  <p>I've done it like this, so that I can toggle it on resize also.</p>
  
  <p>I've created a fiddle <a href="http://jsfiddle.net/mugmjsdy/1/" rel="nofollow">here</a> but it's easier to see the repository and download the examples folder (better visibility).</p>
  
  <p>How to prevent the classes switching on all carousels, and make them switch only when I click on a certain carousel?</p>
  
  <p>EDIT: Codepen preview: <a href="http://codepen.io/dingo_d/pen/doNyMw" rel="nofollow">http://codepen.io/dingo_d/pen/doNyMw</a></p>