How to correctly set the block in which the script should find the buttons?

Question

JavaScript

I connected two owl carousels and it looks like this:

$(document).ready(function() {
  $('.carousel').each(function(){
    var carousel = $(this);
    carousel.owlCarousel({
      loop:true,
      margin:10,
      nav:false,
      dots:false,
      items: 1,
      responsive:{
        0:{
          items:1
        },
        600:{
          items:3
        },
        1000:{
          items:5
        }
      }
    });
    carousel.next().find(".customNextBtn").on('click', function(){
      carousel.trigger("next.owl.carousel");
    });
    carousel.next().find(".customPreviousBtn").on('click', function(){
      carousel.trigger("prev.owl.carousel");
    });
  });
});

The problem is that when the customPreviousBtn and customNextBtn buttons are above the carousel, they don't work, but when they are below, they work.
If I understand correctly, somewhere here:

carousel.next().find(".customNextBtn").on('click', function(){
      carousel.trigger("next.owl.carousel");
    });
    carousel.next().find(".customPreviousBtn").on('click', function(){
      carousel.trigger("prev.owl.carousel");
    });

you need to tell the script to look for these buttons in a block with a specific id, for example "#films", and wrap them in id=films
I just don't know how to do it right.

Answer 1

The problem is that when the buttons customPreviousBtn and customNextBtn are located above the carousel, they do not work, but when they are below, they work.

If I correctly understood the essence of the problem, then the point is this:
when you call carousel.next(), then you take the adjacent "to the right" of the '.carousel'DOM element, i.e. the one that, according to the DOM structure, goes immediately after '.carousel'
Accordingly, if you want to place the buttons above the carousel, then it is logical that this element will be adjacent to the left of '.carousel', i.e. according to the DOM structure, it comes immediately before '.carousel'
. For this, you need to use the prev () method instead of next () (read here )
Example:

carousel.prev().find(".customNextBtn").on('click', function(){
      carousel.trigger("next.owl.carousel");
});