为什么每个循环周期中保存一个值，而另一个则不保存？

Question

为什么在每个循环周期中保存div值，但音频在所有div中具有最后一个值，即不保存。为什么第一个发生什么而另一个没有发生？

var div = document.getElementById("a");
    var audio = document.getElementById("clap");
    for(var i = 0; i < document.querySelector('div').children.length; i++){
 /*This div value is saved -->*/     div.addEventListener("click", function(){
         /*but this is not -->*/audio.play();
      })   
      div = div.nextElementSibling;
     audio = audio.nextElementSibling;
    }