how can I make to have the audio from the video playing to be the only one active

Question

here is the code of the video slider. i tried the script shown below and it worked to bring audio on and off when clicking on the video but when i slide to the next video and if i haven't clicked to turn the audio off from the previous video, the audio is still on on the next video, so if i click on that video, all audios gets mixed.

i need some help with this, i still can't figure it out, all i want is to mute the sound when i click the prev/next buttons so when i click on the video i'm on, the sound from that video is the only playing.

I was told in the comments there are many problems, but idk what those are, i'm new with this, i actually felt it was a success that i could make the video slider. can somebody help me? thanks in advance!

  <div id="video_wrapper" class="carousel slide carousel-fade my-0" data-ride="carousel">

    <div class="carousel-indicators">
      <button type="button" data-bs-target="#video_wrapper" data-bs-slide-to="0"
        class="active" aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#video_wrapper" data-bs-slide-to="1"
        aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#video_wrapper" data-bs-slide-to="2"
        aria-label="Slide 3"></button>
    </div>

      <div class="carousel-item active">
        <video class="video" autoplay loop muted>
          <source src="assets/img/1.mp4" type="video/mp4">
        </video>
      </div>

      <div class="carousel-item">
        <video class="video" autoplay loop muted>
          <source src="assets/img/2.mp4" type="video/mp4">
        </video>
      </div>

      <div class="carousel-item">
        <video class="video" autoplay loop muted>
          <source src="assets/img/3.mp4" type="video/mp4">
        </video>
      </div>

    <button class="carousel-control-prev" type="button" data-bs-target="#video_wrapper" 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="#video_wrapper" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>   

  </div>

$(document).ready(function(){ $("video").prop('muted', true);

$("video").click( function (){ $(this).prop('muted', !$(this).prop('muted')); });