Bootstrap second carousel not working on same page

I use carousel in one web page. i use same code in two different sections on same page. one is working fine but another one is not working. when i remove first than second are work perfectly. How can i fix this.

 <div class="container2">
  <div class="row">
    <div class="col-sm-12" id="aaa">
    
            <div class="carousel-container">
  <div class="inner-carousel">
    <div class="track">
      <div class="card-container">
        <div class="card card1"><img src="https://cdn.shopify.com/s/files/1/0764/5455/t/76/assets/p1.jpg?v=1675318256"><h3 class="txt" id="u">EXCLUSIVES</h3></div>
      </div>
      <div class="card-container">
        <div class="card card2"><img src="https://cdn.shopify.com/s/files/1/0764/5455/t/76/assets/p2.jpeg?v=1675318350"><h3 class="txt" id="u">DECOR & ACCESSORIES</h3></div>
      </div>
      <div class="card-container">
        <div class="card card3"><img src="https://cdn.shopify.com/s/files/1/0764/5455/t/76/assets/p3.JPG?v=1675318435"><h3 class="txt" id="u">PERSONALISED STORYBOOKS</h3></div>
      </div>
      <div class="card-container">
        <div class="card card4"><img src="https://cdn.shopify.com/s/files/1/0764/5455/t/76/assets/p4.jpeg?v=1675318516"><h3 class="txt" id="u">PYJAMAS</h3></div>
      </div>
      <div class="card-container">
        <div class="card card5"><img src="https://cdn.shopify.com/s/files/1/0764/5455/t/76/assets/p5.jpg?v=1675318598"><h3 class="txt" id="u">THEMED ONESIES & TEES</h3></div>
      </div>
      <div class="card-container">
        <div class="card card6"><img src="https://cdn.shopify.com/s/files/1/0764/5455/t/76/assets/p6.JPG?v=1675318687"><h3 class="txt" id="u">STATIONERY</h3></div>
      </div>
      </div>
    </div>
    <div class="nav">
      <button class="prev"><img src="https://i.ibb.co/Hpw9MXB/left.png"></button>
      <button class="next"><img src="https://i.ibb.co/XZjNLyq/right.png"></button>
    </div>
  </div>
</div>