Using more than one carousel per page

I am using Ken Wheeler Slick Carousel to add some sliders to the page. I faced two problems:

• Arrows are displayed in every section of the slides and do not work as expected.
• The function used to display the current number of slides in each slide changes in each section of the slides.

Html

    <section id="project_01">
      <div class="slides slides-1 inner-wrap" data-offcanvas>
       <div class="slide">
         <div class="small-12 columns">
           <img src="img/1.jpg" alt="""">
         </div>
       </div>
       <div class="slide">
         <div class="small-12 columns">
           <img src="img/2.jpg" alt="""">
         </div>
       </div>
       <div class="slide">
         <div class="small-12 columns">
           <img src="img/team_designing.jpg" alt="""">
         </div>
       </div>
     </div>
     <div class="info">
        <a href="#" class="left-off-canvas-toggle">
          <i class="scif-info22"></i>
          <i class="scif-times-circle"></i>
        </a>
      </div>
     <div class="slide-nav">
      <div class="count"><span></span></div>        
      <div class="arrows"></div>
    </div>
   </section>
   <section id="project_02">
      <div class="slides slides-2 inner-wrap" data-offcanvas>
       <div class="slide">
         <div class="small-12 columns">
           <img src="img/3.jpg" alt="""">
         </div>
       </div>
       <div class="slide">
         <div class="small-12 columns">
           <img src="img/5.jpg" alt="""">
         </div>
       </div>
       <div class="slide">
         <div class="small-12 columns">
           <img src="img/6.jpg" alt="""">
         </div>
       </div>
     </div>
     <div class="info">
        <a href="#" class="left-off-canvas-toggle">
          <i class="scif-info22"></i>
          <i class="scif-times-circle"></i>
        </a>
      </div>
     <div class="slide-nav">
      <div class="count"><span></span></div>        
      <div class="arrows"></div>
    </div>
   </section>
   <section id="project_03">
      <div class="slides slides-3 inner-wrap" data-offcanvas>
       <div class="slide">
         <div class="small-12 columns">
           <img src="img/7.jpg" alt="""">
         </div>
       </div>
       <div class="slide">
         <div class="small-12 columns">
           <img src="img/8.jpg" alt="""">
         </div>
       </div>
       <div class="slide">
         <div class="small-12 columns">
           <img src="img/9.jpg" alt="""">
         </div>
       </div>
     </div>
     <div class="info">
        <a href="#" class="left-off-canvas-toggle">
          <i class="scif-info22"></i>
          <i class="scif-times-circle"></i>
        </a>
      </div>
     <div class="slide-nav">
      <div class="count"><span></span></div>        
      <div class="arrows"></div>
    </div>
   </section>

      

        
        
        
      

    

JQuery

<script>
  var updateText = function (slick) {
    var $status = $('#project_01 .count > span'),
        text    = (slick.currentSlide + 1) + '/' + (slick.slideCount);
    $status.text(text);
  };
  //Slick slider
  $('.slides').slick({
    infinite: true,
    speed: 500,
    adaptiveHeight: true,
    appendArrows: $('.arrows'),
    arrows: true,
    autoplay: false,
    fade: false,
    pauseOnHover: true,
    onAfterChange: updateText,
    prevArrow: '<span class="slick-prev">Previous</span>',
    nextArrow: '<span class="slick-next">Next</span>',
    responsive: [{
      breakpoint: 480,
      settings: {
        arrows: true
      }
   }]
  });   
  updateText($('.slides').getSlick());
</script>

      

        
        
        
      

    

Of course I can iterate over jQuery and just change the ids for each, but I'm wondering if there is a better way to simplify the code to get it to work correctly. I want to be able to click the arrows in a section of each slide and it only refreshes the slides in that section. It now shows 3 sets of arrows and updates the slide number in each section of the slides. Thanks in advance for any help or advice.