Why don't two bootstrap sliders work under each other?

Question

css

Hey!
There are sliders. The one above works, but the one below it doesn't want to slide when the arrow is clicked.
This is not a working sass code, the working code is similar, the difference is in the color of the background

.content-facciamo {
  width: 100%;
  padding: 60px 0 60px;
  background: $white;

  .facciamo {
    width: 95%;
    height: auto;
    background: $color-ph-pink;
    margin: 0 auto;

    .main-title {
      font-family: $century-gothic-bold;
      font-size: 20.35px;
      color: $black;
      letter-spacing: 10px;
      margin-bottom: 35px;
      margin-top: 60px;
    }

    .line {
      width: 100%;
      height: 1px;
      background: $white;
    }

    .title {
      font-family: $play-fair;
      font-size: 12.97px;
      color: $black;
      letter-spacing: 2px;
      margin-top: 30px;
    }
    .carousel-control.right, .carousel-control.left { background-image: none;}
    .carousel { margin-top: 70px; margin-bottom: 60px; }
    .carousel-indicators { bottom: 550px}
    .carousel-inner { height: 540px; }

    .glyphicon-chevron-left:before {
      content: " ";
      display: block;
      background: url(../../src/images/arrow-left.png) no-repeat;
      width: 30px;
      height: 30px;
  }

  .glyphicon-chevron-right:before {
    content: " ";
    display: block;
    background: url(../../src/images/arrow-right.png) no-repeat;
    width: 30px;
    height: 30px;
  }

  .carousel-control .glyphicon-chevron-left,
  .carousel-control .glyphicon-chevron-right {
    margin-top: 140px;
  }


    .carousel-indicators li {
      display: inline-block;
      width: 9px;
      height: 9px;
      margin: 1px;
      text-indent: -999px;
      cursor: pointer;
      background: $white;
      border-radius: 10px;
      border: 0;
    }

    .carousel-indicators .active {
      display: inline-block;
      width: 9px;
      height: 9px;
      margin: 1px;
      text-indent: -999px;
      cursor: pointer;
      background: $black;
      border-radius: 10px;
    }
  }
}

Answer 1

<a class="left carousel-control" href="#myCarousel2" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
</a>

Found an error. Do not forget to change the IDs for the very links (arrows) that you click on. And then I completely forgot about them

Answer 2

ID can be the same?