why does the code runs successfully with 'let' keyword, but not with 'var'?

Question

Consider the below code :

<button id="btn-0">Button 1!</button>
<button id="btn-1">Button 2!</button>
<button id="btn-2">Button 3!</button>
<button id="btn-3">Button 4!</button>

<script type="text/javascript">
    var prizes = ['Watch','A Unicorn!', 'A Hug!', 'Fresh Laundry!'];
    for (var btnNum = 0; btnNum < prizes.length-1; btnNum++) {
        // for each of our buttons, when the user clicks it...
        document.getElementById('btn-' + btnNum).onclick = function() {
            // tell her what she's won!
            alert(prizes[btnNum]);
        };
    }
</script>

Here, if I use 'var' for declaring variable btnNum in the 'for' loop, code doesn't work successfully. On clicking the buttons, each button alerts the same value which is the last element of 'prizes' array.

But if I use 'let' keyword in place of 'var', it works successfully. Now, each button on clicking shows different array element (which I want to happen). So, what's wrong with 'var' keyword here and how just replacing it with the 'let', makes everything fine?

<button id="btn-0">Button 1!</button>
<button id="btn-1">Button 2!</button>
<button id="btn-2">Button 3!</button>
<button id="btn-3">Button 4!</button>

<script type="text/javascript">
    var prizes = ['Watch','A Unicorn!', 'A Hug!', 'Fresh Laundry!'];
    for (let btnNum = 0; btnNum < prizes.length-1; btnNum++) {
        // for each of our buttons, when the user clicks it...
        document.getElementById('btn-' + btnNum).onclick = function() {
            // tell her what she's won!
            alert(prizes[btnNum]);
        };
    }
</script>

Answer 1

var creates a function level variable. It is shared by each instance of the loop. Since the clicks come later, they get whatever value the variable has after the last passage through the loop.

let creates a block level variable. Each time you go around the loop you get a new variable that belongs only to that journey through the loop.