Bootstrap 4 Carousel Control Buttons Not Working - html

Question

Im not sure what i am doing wrong but for some reason bootstrap 4 carousel controls is not working if anyone can help I would really appreciate it. Ive been playing around with the code for about an hour so I figure ill get a 2nd opinion to see what is going on.
I looked at the bootstrap docs and I copied and pasted the controls. I looked at the classes and everything looks the same
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous">
<!-- REVIEWS -->
<div id="reviews" class="py-3 bg-green" style="background: #186160;">
<div class="customer-reviews d-block text-center">
<h4> <strong> Customer Reviews </strong></h4>
<div style="color: #ffd400;"> ★ ★ ★ ★ ★</div>
<!-- SLIDER -->
<div class="col-lg-10 offset-lg-1 text-light">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel" >
<div class="carousel-inner" role="listbox">
<!-- SLIDER 1 -->
<div class="carousel-item active text-center pt-4 ">
<blockquote class="blockquote text-center">
<div class="d-flex justify-content-around">
<div>
<p class="mb-0"><i class=" "></i> "I absolutely love this site, probably better than cebook"</p>
<p style="color: #ffd400;">Tomi_Jug****</p>
</div>
<div>
<p class="mb-0"><i class=" "></i> "I love all the users on this site, everyone is fun to talk with."</p>
<p style="color: #ffd400;">Chris****</p>
</div>
</div>
</blockquote>
</div>
<!-- SLIDER 2 -->
<div class="carousel-item text-center pt-4 ">
<blockquote class="blockquote text-center">
<div class="d-flex justify-content-around">
<div>
<p class="mb-0"><i class=" "></i> "I like the freedom it gives me to express, in a safe manner."</p>
<p style="color: #ffd400;">YoruUs**</p>
</div>
<div>
<p class="mb-0"><i class=" "></i> "I love that it's easy to chat with someone. You have a great mobile app. Easy to use."</p>
<p style="color: #ffd400;">HG****</p>
</div>
</div>
</blockquote>
</div>
<!-- SLIDER 3 -->
<div class="carousel-item text-center pt-4 ">
<blockquote class="blockquote text-center">
<div class="d-flex justify-content-around">
<div>
<p class="mb-0"><i class=" "></i> "I like that the site has cool people on it, and I can almost always meet someone new."</p>
<p style="color: #ffd400;">Wet an******</p>
</div>
</div>
</blockquote>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
<!-- SLIDER -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>

Answer 1

Ids are different.
Make changes as
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#carouselExampleControls" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
and check