Using two (owl) carousel on a single page is not working

I am trying to use two owl carousels on my page but I can't.

Gif: https://gyazo.com/51620bc2fa6183bdcaab511632e1eb57

The first one is working perfectly (the one in the top on the gif)

but the second one (the one below on the gif) is not working. It is set to show 4 images instead of the 2 I set. I don't know what to do

This one is working well:

<body>

<!-- MENU-->
<section>
  <div class="owl-carousel owl-theme">
    <div class="item">
      <img src="img/image1.jpg">
    </div>
    <div class="item">
      <img src="img/image2.jpg">
    </div>
    <div class="item">
      <img src="img/image3.jpg">
    </div>
    <div class="item">
      <img src="img/image4.jpg">
    </div>
    <div class="item">
      <img src="img/image5.jpg">
    </div>
    <div class="item">
      <img src="img/image6.jpg">
    </div>
    <div class="item">
      <img src="img/image7.jpg">
    </div>
    <div class="item">
      <img src="img/image8.jpg">
    </div>
    <div class="item">
      <img src="img/image9.jpg">
    </div>
  </div>


  <!--script MENU-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

  <script>
    $(document).ready(function(){
      $(".owl-carousel").owlCarousel({
        loop:true,
        responsive: {
          0 : {
            items : 1
          },
          600 : {
            items : 2
          },
          1200 : {
            items : 4
          }
        },
        autoplay: true,
        autoplayTimeout: 1500
      });
    })
  </script>
 </section>

But this one is not working well:

   <header>

  <div class="owl-carousel owl-theme">
    <div class="item"><img src="/img/Group 1.jpg"  alt="slide1" /></div>
     <div class="item"><img src="/img/Group 2.jpg" alt="slide1" /></div>
  </div>

  <script>
    $('.owl-carousel').owlCarousel({
     loop:true,
     margin:0,
     nav:true,
   dots:true,
     responsive:{
         0:{
             items:1
         },
         600:{
             items:1
         },
         1000:{
             items:1
         }
     }
 })
</script>


<!--Script HEADER-->
 <script src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script>
 <script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>

 </header>

Href Menu:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Href Header:

<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">

Css(header):

    *{ margin:0; padding:0; box-sizing:border-box}
body {
  background-color: #fff;
}


.item img{ height:450px; width:100%; object-fit:cover}
.owl-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
    width: 100%;
}
.owl-nav button {
    background: #fff !important;
    width: 50px;
    height: 50px;
    display: block
}
.owl-nav button.owl-next {
    float: right;
}
.owl-nav button.owl-prev {
    float: left;
}
.owl-dots {
    position: absolute;
    bottom: 5%;
    left: 0;
    right: 0;
}

Solution

Both scripts with which you run the carousel are looking for a block with a class ".owl-carousel" and find them both. So, we have conflict. Both carousels initialized by every script snippets, but with diferent options. You must be better - add diferent ID to every carousel and inintialize them separately (individually):

<div id="carousel-1" class="owl-carousel owl-theme">
...
</div>
<div id="carousel-2" class="owl-carousel owl-theme">
...
</div>
<script>
$("#carousel-1").owlCarousel({
items: 4,
...
});
</script>
<script>
$("#carousel-2").owlCarousel({
items: 2,
...
});
</script>