prevArrow and nextArrow not working with multiple slick sliders

I have multiple sliders on my page and the problem is that the custom arrows I made only work for slider no. 2, e.g. I can press arrows on slider no. 1 or 3, but it will change the pictures on sliders no. 2.

here is the code:

**<section id="slideshow">
    <div class="slick">
      <div><img src="pic.jpg" ></div>
      <div><img src="pic2.jpg" ></div>
      <div><img src="pic3.jpg"></div>
    <div>
    <div class="arrow-prev">
       <span><i class="fas fa-angle-double-left"></i></span>
    </div>
    <div class="arrow-next">
       <span><i class="fas fa-angle-double-right"></i></span>
    </div>
</section>**

<script>
    $(document).ready(() => {
        $('.slick').slick({
            //autoplay: true,
            fade: true,
            dots: false,
            speed: 2000,
            autoplaySpeed: 100,
            pauseOnHover: true,
            arrows: true,
            prevArrow: $('.arrow-prev'),
            nextArrow: $('.arrow-next')
  })
 })
</script>

Any ideas on how to solve the problem?

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum