javascript - Bootstrap 4 - Having two carousels in the same page makes the last item to bug out overlap

Question

I'm trying to implement two carousels into the same page but for some reason when I do that, on both carousels the last few items bug out overlapping and it resets on the 1st card. Is there a way to work around or am I missing something? It could be a missing ID or something but I did change them up and I cannot pin point the issue.

Any help would be nice. Thanks!

JS Fiddle Link

HTML Code

<div id="news-section">
  <div class="container">
    <div class="row pt-5 pb-4">
      <div class="col-12">
        <h1 class="market-updates">Market Updates</h1>
      </div>
    </div>
  </div>


  <div class="container" id="market-update-cards">
    <div class="container-fluid">
      <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner row w-100 mx-auto">
          <div class="carousel-item col-md-4 active">
            <div class="card">
              <img class="card-img-top img-fluid" src="http://placehold.it/800x600/f44242/fff" alt="Card image cap">
              <div class="card-body">
                <h4 class="card-title">Card 1</h4>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
              </div>
            </div>
          </div>
          <div class="carousel-item col-md-4">
            <div class="card">
              <img class="card-img-top img-fluid" src="http://placehold.it/800x600/418cf4/fff" alt="Card image cap">
              <div class="card-body">
                <h4 class="card-title">Card 2</h4>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
              </div>
            </div>
          </div>
          <div class="carousel-item col-md-4">
            <div class="card">
              <img class="card-img-top img-fluid" src="http://placehold.it/800x600/3ed846/fff" alt="Card image cap">
              <div class="card-body">
                <h4 class="card-title">Card 3</h4>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
              </div>
            </div>
          </div>
          <div class="carousel-item col-md-4">
            <div class="card">
              <img class="card-img-top img-fluid" src="http://placehold.it/800x600/42ebf4/fff" alt="Card image cap">
              <div class="card-body">
                <h4 class="card-title">Card 4</h4>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
              </div>
            </div>
          </div>
          <div class="carousel-item col-md-4">
            <div class="card">
              <img class="card-img-top img-fluid" src="http://placehold.it/800x600/f49b41/fff" alt="Card image cap">
              <div class="card-body">
                <h4 class="card-title">Card 5</h4>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
              </div>
            </div>
          </div>
          <div class="carousel-item col-md-4">
            <div class="card">
              <img class="card-img-top img-fluid" src="http://placehold.it/800x600/f4f141/fff" alt="Card image cap">
              <div class="card-body">
                <h4 class="card-title">Card 6</h4>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
              </div>
            </div>
          </div>
          <div class="carousel-item col-md-4">
            <div class="card">
              <img class="card-img-top img-fluid" src="http://placehold.it/800x600/8e41f4/fff" alt="Card image cap">
              <div class="card-body">
                <h4 class="card-title">Card 7</h4>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
              </div>
            </div>
          </div>
        </div>
        <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-12 text-center">
        <a class="btn btn-primary btn-lg btn-header" href="#" role="button">View All</a> 
      </div>
    </div>
  </div>


<!-- Deal Spotlights Area -->
<div class="container">
    <div class="row pt-5 pb-4">
      <div class="col-12">
        <h1 class="deal-updates">Deal Spotlight</h1>
      </div>
    </div>
  </div>


  <div class="container" id="deal-update-cards">
    <div class="container-fluid">
      <div id="DealCar" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner row w-100 mx-auto">
          <div class="carousel-item col-md-4 active">
            <div class="card">
              <img class="card-img-top img-fluid" src="http://placehold.it/800x600/f44242/fff" alt="Card image cap">
              <div class="card-body">
                <h4 class="card-title">Card 1</h4>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
              </div>
            </div>
          </div>
          <div class="carousel-item col-md-4">
            <div class="card">
              <img class="card-img-top img-fluid" src="http://placehold.it/800x600/418cf4/fff" alt="Card image cap">
              <div class="card-body">
                <h4 class="card-title">Card 2</h4>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
              </div>
            </div>
          </div>
          <div class="carousel-item col-md-4">
            <div class="card">
              <img class="card-img-top img-fluid" src="http://placehold.it/800x600/3ed846/fff" alt="Card image cap">
              <div class="card-body">
                <h4 class="card-title">Card 3</h4>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
              </div>
            </div>
          </div>
          <div class="carousel-item col-md-4">
            <div class="card">
              <img class="card-img-top img-fluid" src="http://placehold.it/800x600/42ebf4/fff" alt="Card image cap">
              <div class="card-body">
                <h4 class="card-title">Card 4</h4>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
              </div>
            </div>
          </div>
          <div class="carousel-item col-md-4">
            <div class="card">
              <img class="card-img-top img-fluid" src="

Answer 1

Waitting for answers