Custom next button for slick slider
<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>