Index do event.target

Boa tarde,

Fazendo um exercício de modal. Com o forEach ele funciona perfeitamente. Porém, quando eu estou tentando fazer com o for. Não consigo passar o index.

Abaixo segue o código.

Document *{ margin: 0; padding: 0; } .container{ max-width: 940px; margin: 0 auto; border: 3px solid lightgray; overflow: hidden; } .col-50{ float: left; width: 50%; background-color: lightcoral; height: 340px; } .color{ background-color: aqua; } .modal{ background-color: rgba(0,0,0,0.5); position: fixed; top:0; left: 0; width: 100%; height: 100%; display: none; } .modal .modal--container{ position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); background-color: bisque; width: 400px; height: 400px; } .active{ display: block; } .btn-fechar-modal{ border: 0; background-color: green; position: absolute; top: 0; right: 0; padding: 5px; }
Abrir

Lorem Ipsum1

Fechar
Abrir

Lorem Ipsum2

Fechar
<script>
    var modal = document.querySelectorAll('.modal');
    var botoesAbrir = document.querySelectorAll('.btn-abrir-modal');
    var botoesFechar = document.querySelectorAll('.modal');
 
    // botoesAbrir.forEach(function(botao,i){
    //     botao.addEventListener('click', function(){
    //         modal[i].classList.add('active');
    //     })
    // })
    
    // botoesFechar.forEach(function(botao,i){
    //     botao.addEventListener('click', function(){
    //         modal[i].classList.remove('active');
    //     })
    // })

    for(var i = 0; i < botoesAbrir.length; i++){
        var botao = botoesAbrir[i];
        
        botao.addEventListener('click', function(e){
           console.log();
        })

    }       
</script>
Texto pré-formatado