Issue adding heart Icon to Bootstrap 5 Carousel

The heart/favorities icon in bootstrap 5 carousel is not working. How to add proper functionality to it so that it appears filled (red colored) when clicked and appears empty (white colored) when clicked again.

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
     <!-- Heart Icon -->
     <div class="heart-icon">
        <i class="bi bi-heart"></i>
    </div>
    <div class="carousel-indicators ml-0 mr-4 w-25">
        <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
        <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 4"></button>
        <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 5"></button>
      </div>
    <div class="carousel-inner w-50 rounded-4">
       <!--  Video Slide -->
       <div class="carousel-item active">
          <video class="d-block w-100 rounded-4" controls>
            <source src="{{ asset('venues/venue1/vid1.mp4')}}" type="video/mp4">
            Your browser does not support the video tag.
          </video>
          {{-- <div class="carousel-caption d-none d-md-block">
            <h5>Soccer Pro</h5>
            <p>The best stadium at affordable rates</p>
          </div> --}}
        </div>
      <!-- Image Slide 1 -->
      <div class="carousel-item">
        <img src="{{ asset('venues/venue1/1.png')}}" class="d-block w-100 rounded-4" alt="Image Slide">
        {{-- <div class="carousel-caption d-none d-md-block">
          <h5>Soccer Pro</h5>
          <p>Etihad vs DXB Strikers</p>
        </div> --}}
      </div>
     <!-- Image Slide 2 -->
     <div class="carousel-item">
      <img src="{{ asset('venues/venue1/2.png')}}" class="d-block w-100 rounded-4" alt="Image Slide">
      {{-- <div class="carousel-caption d-none d-md-block">
        <h5>Soccer Pro</h5>
        <p>Etihad vs DXB Strikers</p>
      </div> --}}
    </div>
     <!-- Image Slide 3 -->
     <div class="carousel-item">
      <img src="{{ asset('venues/venue1/3.png')}}" class="d-block w-100 rounded-4" alt="Image Slide">
      {{-- <div class="carousel-caption d-none d-md-block">
        <h5>Soccer Pro</h5>
        <p>Etihad vs DXB Strikers</p>
      </div> --}}
    </div>
     <!-- Image Slide 4 -->
     <div class="carousel-item">
      <img src="{{ asset('venues/venue1/4.png')}}" class="d-block w-100 rounded-4" alt="Image Slide">
      {{-- <div class="carousel-caption d-none d-md-block">
        <h5>Soccer Pro</h5>
        <p>Etihad vs DXB Strikers</p>
      </div> --}}
    </div>
  
    </div>
    <!-- Previous & Next buttons -->
    <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
  
  <!-- Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <!-- CSS for Heart Icon -->
<style>
    .heart-icon {
        position: absolute;
        top: 10px;
        right: 300px;
        z-index: 1000;
    }
    .heart-icon i {
        font-size: 1.5rem;
        color: red; 
        cursor: pointer;
    }
    
</style>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- JavaScript to handle click event on heart icon -->
<script>
    $(document).ready(function() {
        $('.heart-icon').click(function() {
            var heartIcon = $(this).find('i');
            if (heartIcon.hasClass('bi-heart')) {
                heartIcon.removeClass('bi-heart').addClass('bi-heart-fill')/* .css('color', 'red') */;
            } else {
                heartIcon.removeClass('bi-heart-fill').addClass('bi-heart')/* .css('color', 'white') */;
            }
        });
    });
</script>

I tried to change the class property using javascript and the css property but it’s not working.