How to addevent listener to three element with the same class on an HTML document

hello coders in the house, I was trying to add a mouseover event listener to the 3 anchor tag on my HTML code.
but I don't know why the loop seems not to be working.
if I do a[0] or a[1] or a[2] if I mouse over the anchor tag, and inspect element, it works fine. it will add the attribute of id to the tag.
but when I try to loop it and use the index of the loop., which is [i]. I got an error in the console. that the element is undefined.
when I tried to use a while loop, it seems to be an infinite loop without ending, I don't understand whats going on.

What I have tried:

<h2>
  <a href="https://www.facebook.com" class="download-wait" target="_blank" data-href="https://www.google.com">
  click me now
  <a/>
  <a href="https://www.facebook.com" class="download-wait" target="_blank" data-href="https://www.google.com">
  click me now
  <a/>
  <a href="https://www.facebook.com" class="download-wait" target="_blank" data-href="https://www.google.com">
  click me now
  <a/>
  </h2>

 for(var i = 0; i <= document.querySelectorAll(".download-wait").length; i++){
   var a = document.getElementsByClassName("download-wait");
a[i].addEventListener("mouseover", function() {
  a[i].id = "download";
})
}

var i = 0;
while(i <= document.querySelectorAll(".download-wait").length){
  var a = document.getElementsByClassName("download-wait");
a[i].addEventListener("mouseover", function() {
 a[i].id = "download";
 i++;
});
}

Tags: Javascript