我的下一个和上一个按钮会影响所有轮播，而不是单个轮播

Question

$(document).ready(function(){
  // Activate Carousel
  $("#myCarousel").carousel();
    
  // Enable Carousel Indicators
  $(".item1").click(function(){
    $("#myCarousel").carousel(0);
  });
  $(".item2").click(function(){
    $("#myCarousel").carousel(1);
  });
  $(".item3").click(function(){
    $("#myCarousel").carousel(2);
  });
    
  // Enable Carousel Controls
  $(".carousel-control-prev").click(function(){
    $("#myCarousel").carousel("prev");
  });
  $(".carousel-control-next").click(function(){
    $("#myCarousel").carousel("next");
  });


 // Activate Carousel
 $("#myCarou").carousel("pause");
        
        // Enable Carousel Indicators
        $(".item1").click(function(){
          $("#myCarou").carousel(0);
        });
        $(".item2").click(function(){
          $("#myCarou").carousel(1);
        });
        $(".item3").click(function(){
          $("#myCarou").carousel(2);
        });

  $(".carousel-control-prev").click(function(){ 
      
        $("#myCarou").carousel("prev");
       

        
      });
      $(".carousel-control-next").click(function(){ 
      
        $("#myCarou").carousel("next");
      });
          

});
</script>
<div class="row">
<div class="col-sm-6">



    <div class="container mt-3">
        <h2>Activate Carousel with JavaScript</h2>
        <div id="myCarousel" class="carousel slide">
        
          <!-- Indicators -->
          <ul class="carousel-indicators">
            <li class="item1 active"></li>
            <li class="item2"></li>
            <li class="item3"></li>
          </ul>
          
           <!-- The slideshow -->
           <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="anblue.jpg" alt="Los Angeles" width="290px" height="180px">
            </div>
            <div class="carousel-item">
                <img src="blacki.jpg" alt="Los Angeles" width="290px" height="180px">
            </div>
            <div class="carousel-item">
                <img src="artweb.jpg" alt="Los Angeles" width="290px" height="180px">
            </div>
          </div>
          
          <!-- Left and right controls -->
          <a class="carousel-control-prev" href="#myCarousel" id="lefti">
            <span class="carousel-control-prev-icon"></span>
          </a>
          <a class="carousel-control-next" href="#myCarousel">
            <span class="carousel-control-next-icon"></span>
          </a>
        </div>
        </div>

</div><!--col-sm6-->
<div class="col-sm-6">
    <div class="container mt-3">
        <h2>Activate Carousel with JavaScript</h2>
        <div id="myCarou" class="carousel slide">
        
          <!-- Indicators -->
          <ul class="carousel-indicators">
            <button style="font-size: 10px;"><li class="item4 active text-center" style="background-color: blueviolet;"></li>F</button>
            <button><li class="item5 text-center" style="background-color: blue;"></li>B</button>
            <button><li class="item6 text-center" style="background-color:gold;"></li>S</button>
          </ul>
          
          <!-- The slideshow -->
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="anblue.jpg" alt="Los Angeles" width="290px" height="180px">
            </div>
            <div class="carousel-item">
                <img src="blacki.jpg" alt="Los Angeles" width="290px" height="180px">
            </div>
            <div class="carousel-item">
                <img src="artweb.jpg" alt="Los Angeles" width="290px" height="180px">
            </div>
          </div>
          
          <!-- Left and right controls -->
          
        </div>
        </div>
   

</div><!--col-sm6-->






</div><!--row-->

**我正在使用https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_ref_js_carousel_js中的代码 。我无法在此处输入html代码，因为系统将其标记为未格式化，但它与上述网站的代码相同，但ive添加了另一个带有一些更改的轮播。 我有2个ID为mycarousel和mycarou的轮播，每个都有3张图片。 问题是，当我单击两个转盘中任何一个的下一个和上一个按钮时，它会同时更改2个转盘的图像。就像他们 共享同一听众，例如，当我单击

时

$(".carousel-control-prev").click(function(){
    $("#myCarousel").carousel("prev");
  });
it feels like ive also clicked 
$(".carousel-control-prev").click(function(){ 

        $("#myCarou").carousel("prev");
      });

**