How would I apply a fade out animation to each of the icons in my menu within a for loop

im currently working on an animation where there’s a delay between each of the icons when fading out. The fade out animation works fine, but only on the first icon and im unsure on why this is. Could some one maybe point out the mistake im making?

Javascript code:

function closeHorizontalWindow()
{
const delay = 150;

const reasons = ['btnReady', 'btnNotReady', 'btnBreak', 'btnEmail', 'btnLunch', 
'btnComfortBreak', 'btnMeeting', 'btnChat']

for (let i = 0; i < reasons.length; i++) {   
    document.getElementById(reasons[i]).style.animation = `reasonsfadeout 0.45s ease-out 
forwards ${delay}ms` 
    delay+=150       
}

CSS code:

@keyframes reasonsfadeout
{
  from{opacity: 1; }
  to {opacity: 0; } 
}

}

Thankyou