title: How to assign values from array via forEach?
body: <p>I've created a simple array from which I would like to assign the values of each row to attributes via generated HTML. I'm using a forEach and am exporting the values via variables but currently the only values being exported are the ones in the last row of the array. I understand why this is happening because the forEach is reaching the end and then simply exporting the last assigned values but I am unsure how to fix it.</p>
  <p>At the moment the target forEach is working correctly and assigning a number for each of the div items being generated but the itemNumber and itemColour variable values are not being applied as expected.</p>
  <pre><code>let targets = document.querySelectorAll('div');
  let targetCount = 0;
  
  const items = [
      ['123456', 'Red'],
      ['234567', 'Blue'],
      ['345678', 'Yellow'],
  ]
  
  // console.log(`Array size: ${targets.length}`);
  
  targets.forEach((target, i) =&gt; {
      // console.log(&quot;i&quot; + i);
      // console.log(&quot;targetCount &quot; + targetCount);
      // console.log(items.length);
  
  
      if (i &lt; items.length) {
          // console.log(`item: ${item}`);
          //target = target.closest(('.content-template'));
  
          let itemNumber;
          let itemColour;
  
          // loop through each item
          items.forEach(item =&gt; {
                  itemNumber = item[0];
                  itemColour = item[1];
                  console.log(itemNumber);
                  console.log(itemColour);
          });
  
          target.insertAdjacentHTML('afterbegin', `&lt;div id=&quot;${targetCount}&quot; data-number=&quot;${itemNumber}&quot; data-colour=&quot;${itemColour}&quot;&gt;+&lt;/div&gt;`);
  
          targetCount++;
  
      }
  });
  </code></pre>
  <p>Full demo here: <a href="https://codepen.io/Shoxt3r/pen/eYMjbxP" rel="nofollow noreferrer">https://codepen.io/Shoxt3r/pen/eYMjbxP</a></p>