How can a temporary variable be "saved" inside an event handler

<h3>Click these buttons (Created with 'let'):</h3>
<div id="let-container"></div>

<h3>Click these buttons (Created with 'let'):</h3>
<div id="let-container"></div>

const container = document.getElementById('let-container');

    for (let i = 1; i <= 3; i++) {

      const btn = document.createElement('button');
      btn.innerText = `Button ${i}`;
      btn.addEventListener('click', () => {
        console.log(`You clicked the button that was created when 'i' was: ${i}`);
      });
      
      container.appendChild(btn);
    }

const container = document.getElementById('let-container');

    for (let i = 1; i <= 3; i++) {

      const btn = document.createElement('button');
      btn.innerText = `Button ${i}`;
      btn.addEventListener('click', () => {
        console.log(`You clicked the button that was created when 'i' was: ${i}`);
      });
      
      container.appendChild(btn);
    }