title: async function does update iterator correctly at the begining but not at the end
body: <p>In the code bellow I work with CSS DOM, which may be computation heavy. This is apparently necessary to access the <code>:after</code> selector. <code>renderItem</code> method will add a new item to the DOM (including it's after element) and this is the reason why I have used the <code>async</code> function and <code>await</code> for it's return in each iteration inside of <code>loadFromStorage</code>.</p>
  <p>However, the <code>await</code> seems to not work correctly, or something weird happens inside of <code>renderItem</code> function. The <code>n</code> iterator is updated correctly at the beginning of the function (items are correctly rendered to the screen and the first <code>console.debug</code> prints a correct value in a correct order), but at the bottom, the second printed value, is always the last iteration value (which is 4 in my case, as I am trying to render 4 items from the local storage) and <code>getCSSRule</code> method is getting a wrong number.</p>
  <pre class="lang-js prettyprint-override"><code>let books = []
  let n = 0
  
  const renderItem = async (entry, direction = 1) =&gt; {
    const li = document.createElement('li')
    const ul = document.querySelector('ul')
    li.classList.add('item')
    n += 1
    console.debug(`iter: ${n}`)
    li.id = (`item${n}`)
    await addCSSRule(`#item${n}:after`)
    li.innerText = entry.slice(0, entry.length - 13)
    if (direction === 1)
      ul.appendChild(li)
    else
      ul.insertBefore(li, ul.firstChild)
    console.debug(`iter: ${n}`)
    const s = await getCSSRule(`#item${n}::after`).catch(() =&gt; {
      console.debug(`Failed to find ':after' selector of 'item${n}'`)
      return false
    })
    s.style.content = &quot;\&quot;&quot;+ entry.slice(entry.length - 13, entry.length) +&quot;\&quot;&quot;
    return true
  }
  
  const loadFromStorage = () =&gt; {
    books = localStorage.getItem('books').split('//')
    books.forEach(async (entry) =&gt; {
      await renderItem(entry)
    })
  }
  
  ...
  </code></pre>
  <p>Console result (considering <code>localStorage.getItem('books').split('//')</code> returns 4 items):</p>
  <pre><code>iter: 1
  iter: 2
  iter: 3
  iter: 4
  iter: 4 // Printed x4
  </code></pre>
  <p>I been also trying to pass this <code>renderItem</code> method to <code>await</code> inside of a <code>Promise</code> object, which give me the same result. Also when I update the <code>n</code> iterator at the end of function the same thing happens, but at the beginning of it.</p>
  <p>I am sorry if some terminology I have used is not correct in the context of JavaScript, I been not using this language for many years and currently I am trying to catch on.</p>