title: Slick.js appendarrows doesn't work for multiple carousels
body: <p>I am using the Slick jQuery carousel and I have a problem whenever I use the "appendArrows" option:</p>
  
  <pre><code>$(document).ready(function(){
    $('.post-slider').slick({
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 2,
      slidesToScroll: 1,
      appendArrows: '.button-container',
      centerMode: true
  });
  });
  </code></pre>
  
  <p>You see, I need to output multiple carousels and yet the number of carousels I display is also the number of times the appendArrows function seems to run inside each carousel. </p>
  
  <pre><code>&lt;div id="slidersort"&gt;
  &lt;div class="slider"&gt;
      &lt;span class="drag-handle"&gt;☰&lt;/span&gt;
      &lt;div class="wrap_lined_header"&gt;&lt;h2&gt;News&lt;/h2&gt;&lt;div class="button-container"&gt;&lt;/div&gt;&lt;/div&gt;
  
      &lt;div class="clr"&gt;&lt;/div&gt;
      &lt;div class="post-slider"&gt;
          &lt;?php 
          $args = array('post_type' =&gt; 'news');
          $loop = new WP_Query( $args );
  
          while ( $loop-&gt;have_posts() ) : $loop-&gt;the_post();
          ?&gt;
          &lt;div&gt;
              &lt;a class="post-link" href="&lt;?php the_permalink() ?&gt;"&gt; &lt;/a&gt;
              &lt;h2&gt;&lt;?php the_title(); ?&gt;&lt;/h2&gt;
              &lt;div class="post-date"&gt;&lt;?php the_date('d/m/Y') ?&gt;&lt;/div&gt;
              &lt;div class="entry-content"&gt;
                  &lt;p&gt;&lt;?php the_field('summary'); ?&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;?php endwhile;?&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="slider"&gt;
      &lt;span class="drag-handle"&gt;☰&lt;/span&gt;
      &lt;div class="wrap_lined_header"&gt;&lt;h2&gt;Weather&lt;/h2&gt;&lt;div class="button-container"&gt;&lt;/div&gt;&lt;/div&gt;
  
      &lt;div class="clr"&gt;&lt;/div&gt;
      &lt;div class="post-slider"&gt;
          &lt;?php 
          $args = array('post_type' =&gt; 'news');
          $loop = new WP_Query( $args );
  
          while ( $loop-&gt;have_posts() ) : $loop-&gt;the_post();
          ?&gt;
          &lt;div&gt;
              &lt;a class="post-link" href="&lt;?php the_permalink() ?&gt;"&gt; &lt;/a&gt;
              &lt;h2&gt;&lt;?php the_title(); ?&gt;&lt;/h2&gt;
              &lt;div class="post-date"&gt;&lt;?php the_date('d/m/Y') ?&gt;&lt;/div&gt;
              &lt;div class="entry-content"&gt;
                  &lt;p&gt;&lt;?php the_field('summary'); ?&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;?php endwhile;?&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="slider"&gt;
      &lt;span class="drag-handle"&gt;☰&lt;/span&gt;
      &lt;div class="wrap_lined_header"&gt;&lt;h2&gt;Sports&lt;/h2&gt;&lt;div class="button-container"&gt;&lt;/div&gt;&lt;/div&gt;
  
      &lt;div class="clr"&gt;&lt;/div&gt;
      &lt;div class="post-slider"&gt;
          &lt;?php 
          $args = array('post_type' =&gt; 'news');
          $loop = new WP_Query( $args );
  
          while ( $loop-&gt;have_posts() ) : $loop-&gt;the_post();
          ?&gt;
          &lt;div&gt;
              &lt;a class="post-link" href="&lt;?php the_permalink() ?&gt;"&gt; &lt;/a&gt;
              &lt;h2&gt;&lt;?php the_title(); ?&gt;&lt;/h2&gt;
              &lt;div class="post-date"&gt;&lt;?php the_date('d/m/Y') ?&gt;&lt;/div&gt;
              &lt;div class="entry-content"&gt;
                  &lt;p&gt;&lt;?php the_field('summary'); ?&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;?php endwhile;?&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>So let's say I have 3 carousels displaying (as above), whenever I display the page, it returns me 3 buttons like this:</p>
  
  <pre><code>&lt;div class="button-container"&gt;
  &lt;button type="button" data-role="none" class="slick-prev slick-arrow" aria-label="Previous" role="button"&gt;Previous&lt;/button&gt;
  &lt;button type="button" data-role="none" class="slick-prev slick-arrow" aria-label="Previous" role="button"&gt;Previous&lt;/button&gt;
  &lt;button type="button" data-role="none" class="slick-prev slick-arrow" aria-label="Previous" role="button"&gt;Previous&lt;/button&gt;
  &lt;button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button"&gt;Next&lt;/button&gt;
  &lt;button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button"&gt;Next&lt;/button&gt;
  &lt;button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button"&gt;Next&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Any ideas on how I can alter the original jQuery call to play nice with 3 carousels? I was thinking how I could get the appendArrows option to display only the BEGINNING of a class name then I could run a simple PHP loop to add numerical values to each of them, but I'm afraid my jQuery isn't that up to scratch. </p>
  
  <p>Unless you have a better idea?</p>