How to use one mute unmute button for multiple videos on the same page?

I have the following code which I am using to mute/unmute a video. I have 3 other videos on the same page, I want to apply this mute/unmute wave animation button to every single video.

Additionally, I want only one video will play sound at a time. That means if I unmute a video and then unmute another video, the previous video will be muted automatically, and unmute the current one.

Here is my current working code which works perfectly for a single video.

document.addEventListener('DOMContentLoaded', function() {
    
    var muteButton = document.querySelector('#mute-button');
    var unmuteButton = document.querySelector('#unmute-button');
    var heroBackgroundVideo = document.querySelector('.herosection video');
    
    // Ensure the video is ready to play before changing the muted property
    heroBackgroundVideo.play();
    
    muteButton.addEventListener('click', function (event) {
     heroBackgroundVideo.muted = true;
     muteButton.classList.add('d-none');
     unmuteButton.classList.remove('d-none');
    }); 
    
    unmuteButton.addEventListener('click', function (event) {
     heroBackgroundVideo.muted = false;
     unmuteButton.classList.add('d-none');
     muteButton.classList.remove('d-none');
    }); 
    
    });

#myVideo{
    background-color:#ccc;
    position:fixed;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
}
.button-wrapper {
     position: fixed;
     bottom: 30px; /* Adjust this value to move the button up or down */
     right: 30px; /* Adjust this value to move the button left or right */
    }
    
    
    .loader{
       height:40px;
       display: flex;
       align-items: center;
       cursor: pointer;
    }
    
    .loader .stroke{
       display: block;
       position: relative;
       background: #f1f1f1;
       height: 100%;
       width: 3px;
       border-radius: 50px;
       margin: 0 5px;
       animation: animate 1.2s linear infinite;
    }
    
    @keyframes animate{
       50%{
           height: 20%;
       }
       100%{
           height: 100%;
       }
    }
    
    .stroke:nth-child(1){
       animation-delay: 0s;
    }
    .stroke:nth-child(2){
       animation-delay: 0.3s;
    }
    .stroke:nth-child(3){
       animation-delay: 0.6s;
    }
    .stroke:nth-child(4){
       animation-delay: 0.9s;
    }
    .stroke:nth-child(5){
       animation-delay: 0.6s;
    }
    .stroke:nth-child(6){
       animation-delay: 0.3s;
    }
    .stroke:nth-child(7){
       animation-delay: 0s;
    }
    .d-none{
        display: none;
    }
    #unmute-button .stroke{
        background: #f00;
    }

<div class="herosection">
      <video id="myVideo" autoplay loop muted>
         <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
     </video>
    </div>
    
    <div class="button-wrapper">
     <div class="loader d-none" id="mute-button">
       <span class="stroke"></span>
       <span class="stroke"></span>
       <span class="stroke"></span>
       <span class="stroke"></span>
       <span class="stroke"></span>
       <span class="stroke"></span>
       <span class="stroke"></span>
     </div>
     <div class="loader" id="unmute-button">
       <span class="stroke"></span>
       <span class="stroke"></span>
       <span class="stroke"></span>
       <span class="stroke"></span>
       <span class="stroke"></span>
       <span class="stroke"></span>
       <span class="stroke"></span>
     </div>
    </div>

I tried following code, but it didn’t work.

document.addEventListener('DOMContentLoaded', function() {

var muteButtons = document.querySelectorAll('#mute-button');
var unmuteButtons = document.querySelectorAll('#unmute-button');
var videos = document.querySelectorAll('video');
var currentPlayingVideo = null;

videos.forEach(function(video, index) {
 // Ensure the video is ready to play before changing the muted property
 video.play();
 video.addEventListener('play', function() {
 currentPlayingVideo = video;
 muteButtons[index].classList.remove('d-none');
 unmuteButtons[index].classList.add('d-none');
 });
});

muteButtons.forEach(function(button, index) {
 button.addEventListener('click', function (event) {
 videos.forEach(function(video) {
 if (video !== currentPlayingVideo) {
  video.muted = true;
 } else {
  video.muted = false;
  muteButtons[index].classList.add('d-none');
  unmuteButtons[index].classList.remove('d-none');
 }
 });
 });
});

unmuteButtons.forEach(function(button, index) {
 button.addEventListener('click', function (event) {
 videos.forEach(function(video) {
 if (video === currentPlayingVideo) {
  video.muted = false;
  muteButtons[index].classList.remove('d-none');
  unmuteButtons[index].classList.add('d-none');
 }
 });
 });
});

});

Can Anyone Help?