Help with javasript code!

var div = document.getElementById("a");
var audio = document.getElementById("clap");
for(var i = 0; i < document.querySelector('div').children.length; i++){
  div.addEventListener("click", function(){
    audio.play(); //<-- audio eventually gets the final value  in all loop cycles,
                        //so all the elements play the same audio.
  })
  div = div.nextElementSibling;
 audio = audio.nextElementSibling;
}

In all loop cycles “audio” in the event function refers to the same value, how do I do what I am intended to do, that is, assign the loop’s specific value to the “audio” in each cycle?

Found the solution but I would appreciate if anyone explained how it works under the hood.

var div = document.getElementById("a");
var audio = document.getElementById("clap");
for(var i = 0; i < document.querySelector('div').children.length; i++){
  try{throw audio}
  catch(catched){
  div.addEventListener("click", function(){
     catched.play(); 
  })  
  }
  
  div = div.nextElementSibling;
 audio = audio.nextElementSibling;
}