Q: my next and previous buttons affect all carousels instead of single carousels $(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-->




**Im using code from https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_ref_js_carousel_js
.I couldn't type the html code here as the system flagged it as unformatted but its the same code from the above website but ive added another carousel with a few changes.
I have 2 carousels with id mycarousel and mycarou each with 3 images.
The issue is when i click the next and previous buttons of any of the the two carousels it changes the images of 2 carousels at the same time. Its like they
share the same listener e.g when i click on
$(".carousel-control-prev").click(function(){
    $("#myCarousel").carousel("prev");
  });
it feels like ive also clicked 
$(".carousel-control-prev").click(function(){ 

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



**
