I'm trying to understand, how variables in javascript work. Here is my code:

textarea.addEventListener('keyup', (e) => {
   singleChoices.innerHTML = textarea.value
      .split(',')
      .filter((eintrag) => {
         return eintrag.trim() !== ''
      })
      .map((choice) => {
         return `<span class="choice">${choice.trim()}</span>\n`
      })
      .join('')

   if (e.code === 'Enter') {
      textarea.value = ''

      const choice = getRandomChoice()
      
      const repeat = setInterval(() => {
         blinkOn(choice)
         const verzoegerung = setTimeout(() => {
            blinkOff(choice)
         }, 30)
      }, 30)

      const stopRepeat = setTimeout(() => {
         clearInterval(repeat)
         blinkOn(choice)
      }, 2000)
   }
})

function getRandomChoice() {
   const choices = document.querySelectorAll('.single-choice .choice')
   let randomIndex = Math.floor(Math.random() * choices.length)
   return (choice = choices[randomIndex])
}

Im trying to create a blink-effect. BlinkOn adds a class with a new color to a random span (called choice), blinkOff is removing this class again.

My Question: After two seconds I want to keep the last random index and call again blinkOn ON that index. Short: I need to use the same value of the random index in stopRepeat part. How do I have to define the variables? At this moment I didnt get it!