1 Volume controller for multiple players? - html

Question

Is there an easy way to repeat this code to create a volume controller that works for 4 different players simultaneously? I've managed to get it to work for one player at any given point by changing the myAudio(x) value but any more than that seems to confuse it.
// Global variables and controls
var vid = document.getElementById("myVideo");
var volumeControl = document.getElementById("vol-control");
var setVolume = function(){
vid.volume = this.value / 100;
};
var audio = document.getElementById("myAudio(1)");
var volumeControl2 = document.getElementById("vol-control2");
var setVolume2 = function(){
audio.volume = this.value / 100;
};
//event listeners
volumeControl.addEventListener('change',setVolume);
volumeControl.addEventListener('input',setVolume);
volumeControl2.addEventListener('change',setVolume2);
volumeControl2.addEventListener('input',setVolume2);

Answer 1

Delegate
HTML
<div id="audvid">
<video.../>
<audeo.../>
</div>
event listeners
document.getElementById("audvid").addEventListener("change", setVolume)
document.getElementById("audvid").addEventListener("input", setVolume)
change whatever is accessed
const setVolume = function(e) {
const tgt = e.target;
if (["AUDIO", "VIDEO"].includes(tgt.tagName)) {
tgt.volume = tgt.value / 100;
}
};
change any audio/video
const setVolume = function(e) {
const tgt = e.target;
[...document.querySelectorAll("AUDIO", "VIDEO")].forEach(ele => {
ele.volume = tgt.value / 100;
})
};