Var and Let in for loops

I understand scope, but perhaps I don't understand what goes on under the hood with for loops. The following code is from the JavaScript tutorial on Const and Let. Using "var" all buttons will output "Button 10 Pressed" when clicked. Using "let" they will correctly display "Button (insert number of button) Pressed." I was under the impression that once the event listener was added during each iteration that it was pretty much set in stone. Based on the output though, it's almost like nothing is really saved until the loop has completed. I'm not seeing how i being in global scope really affects the value in the event listener after it has been processed through the loop and has moved on to the next iteration.

<h1>Buttons</h1> <button>Button 0</button> <button>Button 1</button> <button>Button 2</button> <button>Button 3</button> <button>Button 4</button> <button>Button 5</button> <button>Button 6</button> <button>Button 7</button> <button>Button 8</button> <button>Button 9</button> <button>Button 10</button>

    <script>
    const buttons = document.getElementsByTagName("button");

    for (var i = 0; i < buttons.length; i++) {
        const button = buttons[i];
        button.addEventListener("click", function() {
            alert("Button " + i + " Pressed");
        });
    }

    </script>