JSFiddle - React, Tailwind, and code Playground

HTML

<button id="1">
Outside scope
</button>
<button id="2">
Inside scope
</button>

JavaScript

const a = [1,2,3];



document.getElementById('1').addEventListener('click', () => {
  for(j=0; j<10000;j++){
    a.forEach(i => {
      //This var is never referenced again, gets flushed
      const button = document.createElement('button');
      button.innerHTML = i;
      button.hidden = true;
      //This one gets referenced again so it can't get flushed, but where is it stored?
      const alertMsg = `You clicked button ${i}`;
      button.addEventListener('click', () => {
        alert(alertMsg);
      })
      document.body.appendChild(button);
    });
  }
})

document.getElementById('2').addEventListener('click', () => {
	for(j=0; j<10000;j++){
    a.forEach(i => {
      //This var is never referenced again, gets flushed
      const button = document.createElement('button');
      button.innerHTML = i;
      button.hidden = true;
      button.addEventListener('click', (evt) => {
        alert(`You clicked button ${evt.target.innerHTML}`);
      })
      document.body.appendChild(button);
    });
  }
})