Comment faire en sorte qu'une fermeture dans une boucle se souvienne de la valeur de la variable à chaque itération en JavaScript ?

Bonjour ! Je viens de commencer à apprendre JavaScript et j'ai rencontré un problème que je ne comprends pas. J'ai une boucle dans laquelle je crée des gestionnaires d'événements pour plusieurs boutons. Chaque bouton doit afficher son numéro lors du clic, mais au lieu de cela, tous les boutons affichent le même nombre — la dernière valeur du compteur.

// Création dynamique des boutons
for (var i = 0; i < 5; i++) {
    var btn = document.createElement('button');
    btn.textContent = 'Bouton ' + i;
    btn.addEventListener('click', function() {
        alert('Vous avez cliqué sur le bouton numéro ' + i);
    });
    document.body.appendChild(btn);
}

Lorsque je clique sur n'importe quel bouton, un message apparaît : "Vous avez cliqué sur le bouton numéro 5". Pourquoi cela se produit-il ? Je m'attendais à ce que chaque bouton se souvienne de sa valeur i de l'itération dans laquelle il a été créé.

J'ai entendu parler de fermetures, mais je ne comprends pas comment elles fonctionnent dans une boucle. Expliquez-moi, s'il vous plaît, comment résoudre correctement ce problème. De préférence avec des exemples.