How do I add second mute button to multiple HTML5 videos on one page? - html

Question

I am running a JS script to add a secondary mute/unmute button to full screen HTML5 videos in a vertical carousel. They autoplay when in the viewport (via JS) but mute/unmute has to be a user interaction per iOS standards, etc. I have pieced together a script that work with only the first video, since they all have the id="video", but I cannot figure out how to make this work for multiple videos.
This is the code:
var vid, mutebtn2;
function intializePlayer(){
// Set object references
vid = document.getElementById("video");
mutebtn2 = document.getElementById("mutebtn2");
// Add event listeners
mutebtn2.addEventListener("click",vidmute2,false);
}
window.onload = intializePlayer;
function vidmute2(){
if(vid.muted){
vid.muted = false;
mutebtn2.innerHTML = "Mute";
} else {
vid.muted = true;
mutebtn2.innerHTML = "Unmute";
}
}
<div class="swiper-slide full-video">
<video id="video" loop muted playsinline>
<source src="video1.mp4" type="video/mp4">
</video>
<button id="mutebtn2">Mute</button>
</div>
<div class="swiper-slide full-video">
<video id="video" loop muted playsinline>
<source src="video2.mp4" type="video/mp4">
</video>
<button id="mutebtn2">Mute</button>
</div>
<div class="swiper-slide full-video">
<video id="video" loop muted playsinline>
<source src="video3.mp4" type="video/mp4">
</video>
<button id="mutebtn2">Mute</button>
</div>
The button work for the first video but no video after that. How would I apply this to every video element on a page?