title: Adding animation class to each <span>letter</span> after creation from an array of words - Infinite loop issue
body: <p>The goal is to animate each string value from the given array 'sampleArray', one letter at a time.</p>
  <p>With the help of imvain2. I was able to create a timeout that would display each word at regular intervals. I've just managed to wrap each individual letter with spans of the class 'hidden'.</p>
  <p>The next step is to add the class 'visible' to each letter (span) at a consistent interval. I'm very confused as to how these two functions would interact.</p>
  <p>The two functions are.</p>
  <ol>
  <li>The creation of the div and spans with the letters.</li>
  <li>The timed adding of classes to each span</li>
  </ol>
  <p>I have tried making the iife async and then creating an await call (outside the for loop) to another async function which adds the visible class to each span. This created an infinite loop. The cleanest code I have so far is the following.</p>
  <p>Thanks for your help.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const wrapper = document.querySelector(".text-wrapper");
  const buttonAnimate = document.querySelector(".animation");
  buttonAnimate.addEventListener("click", animation);
  
  let i = 0;
  let j = 0;
  
  let sampleArray = ["Just", "another", "cool", "heading"];
  
  /*
  sampleArray[i] === word
  samleArray[i][j] === letter
  */
  
  async function animation() {
    // debugger;
    console.log(`entry point: i is at ${i}`);
    if (i &lt; sampleArray.length) {
      let word = document.createElement("div");
      // Add class to p element
      word.classList.add(`words`, `word${i}`);
  
      // Use immediately invoked function expression
      ((j, word) =&gt; {
        // Could I add a for loop here to update word.innerHTML?
        for (let j = 0; j &lt; sampleArray[i].length; j++) {
          // wrap each letter with span and give class 'hidden'
          {
            word.innerHTML += `&lt;span class="hidden"&gt;${sampleArray[i][j]}&lt;/span&gt;`;
          }
          // on timer give each span a new class of 'visible'. This method is preferable as I can use other animation effects
          // setTimeout(() =&gt; {word.innerHTML += `&lt;span class="hidden visible"&gt;${sampleArray[i][j]}&lt;/span&gt;`, 500 * j})
          console.log(word.innerHTML);
        }
      })(j, word);
  
      // Add text to screen
      wrapper.appendChild(word);
      console.log(word);
      i++;
      console.log(`i is at ${i}`);
      setTimeout(animation, 1000);
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
    box-sizing: border-box;
  }
  
  *,*::before, *::after {
    box-sizing: inherit;
  }
  
  body {
    margin: 0;
  }
  
  
  .wrapper {
    width: 100%;
    background-color: #333;
    color: #FFA;
    text-align: center;
    height: 100vh;
    display: flex;
    flex-direction: row;
    gap: 10rem;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    position: relative;
  }
  
  .text-wrapper {
    position: absolute;
    top: 0;
    width: 100%;
    display: flex;
    gap: 3rem;
    flex-direction: column;
    justify-content: center;
    justify-content: space-around;
  }
  
  .button {
    font-size: 3rem;
    border-radius: 6px;
    background-color: #47cefa;
  }
  
  .button:hover {
    cursor: pointer;
    background-color: #BCEF4D;
  }
  
  /* Opacity will be set to zero when I am able to update the dom to include spans of class 'letter' */
  .words {
    opacity: 1;
  }
  
  .hidden {
    opacity: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;link rel="stylesheet" href="style.css"&gt;
    &lt;title&gt;Create Element&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;section class="wrapper"&gt;
      &lt;button class="button animation"&gt;Start Animation&lt;/button&gt;
      &lt;div class="text-wrapper"&gt;&lt;/div&gt;
    &lt;/section&gt;
    &lt;script type="module" src="./main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>