How to put 2 owl carousels on one page?

Question

JavaScript

Here is my website.
I've connected owl carousel
. The problem is that the navigation (arrows < >) doesn't work properly. They scroll in turn in one direction, first one carousel and in the other direction another carousel.
How to fix? I so understand it is necessary to use a certain DOM element. But I can’t because I don’t know about it;)
Here is the code of both carousels:

$(document).ready(function(){
  $(".slide-one").owlCarousel({
        loop:false,
    	margin:30,
    	nav:true,
    	navText : ['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'],
    navContainer: '.main-content .custom-nav',
    	dots:false,
    	responsive:{
        0:{
          items:1
        },
        300:{
            items:1
        },
        540:{
            items:2
        },
        960:{
            items:3
        },
        1140:{
          items:5
        }
    	}
    });

    $(".slide-two").owlCarousel({
        loop:false,
    	margin:30,
    	nav:true,
    	navText : ['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'],
    navContainer: '.main-content .custom-nav',
    	dots:false,
    	responsive:{
        0:{
          items:1
        },
        300:{
            items:1
        },
        540:{
            items:2
        },
        960:{
            items:3
        },
        1140:{
          items:5
        }
    	}
    });
});

Answer 1

To work adequately, you need to give the block with the custom-nav class unique classes for each slider.
I got it like this:
Well, of course, do not forget to register these classes in html
Additionally, you can see in the demo https://codepen.io/login2030/pen/oNvwXLx?editors=1010