title: Custom next button for slick slider
body: <p>I have on the page, there are two identical sliders, but they may be more. I need to make a custom button <code>Next</code> for each of sliders. I try to do so:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="slider-wrap"&gt;
      &lt;div class="slider"&gt;
          &lt;div class="slider-item"&gt;Slide 1&lt;/div&gt;
          &lt;div class="slider-item"&gt;Slide 2&lt;/div&gt;
          &lt;div class="slider-item"&gt;Slide 3&lt;/div&gt;
      &lt;/div&gt;
      &lt;button id="next"&gt;Next &gt;&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;div class="slider-wrap"&gt;
      &lt;div class="slider"&gt;
          &lt;div class="slider-item"&gt;Slide 1&lt;/div&gt;
          &lt;div class="slider-item"&gt;Slide 2&lt;/div&gt;
          &lt;div class="slider-item"&gt;Slide 3&lt;/div&gt;
      &lt;/div&gt;
      &lt;button id="next"&gt;Next &gt;&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>$('.slider').slick({
      dots: true,
      nextArrow: $('#next')
  });
  </code></pre>
  
  <p>Demo: <a href="http://codepen.io/fabric/pen/bwprxJ" rel="nofollow">http://codepen.io/fabric/pen/bwprxJ</a></p>
  
  <p><strong>Update:</strong>
  Second demo: <a href="http://codepen.io/fabric/pen/KgzZVz" rel="nofollow">http://codepen.io/fabric/pen/KgzZVz</a></p>
  
  <p>If I click on the next button of the first slide, then the slide is changed of the second. And if the second, then nothing works. How to fix it?</p>