كيف تجعل الإغلاق في JavaScript يتذكر قيمة المتغير في كل تكرار داخل الحلقة؟

مرحبًا! لقد بدأت للتو في تعلم JavaScript وواجهت مشكلة لا أستطيع فهمها. لدي حلقة أقوم فيها بإنشاء معالجات الأحداث لعدة أزرار. يجب أن يعرض كل زر رقمه عند النقر، ولكن بدلاً من ذلك، تعرض جميع الأزرار نفس الرقم — آخر قيمة للعداد.

// إنشاء الأزرار ديناميكيًا
for (var i = 0; i < 5; i++) {
    var btn = document.createElement('button');
    btn.textContent = 'زر ' + i;
    btn.addEventListener('click', function() {
        alert('لقد نقرت على الزر رقم ' + i);
    });
    document.body.appendChild(btn);
}

عند النقر على أي زر، تظهر رسالة "لقد نقرت على الزر رقم 5". لماذا يحدث هذا؟ كنت أتوقع أن يتذكر كل زر قيمة i الخاصة به من التكرار الذي تم إنشاؤه فيه.

لقد سمعت شيئًا عن الإغلاقات، لكنني لا أفهم كيف تعمل داخل الحلقة. من فضلك اشرح كيفية حل هذه المشكلة بشكل صحيح. يُفضل مع أمثلة.