打开特定ID的模态

I've a script that gives a button a specific id <button id='myBtn$i'>Open Modal</button>, $i goes with the for loop. With that specific id I should be able to open specific modals with the same $i <div id='myModal$i' class='modal'></div> . With this javascript

<script>
var modal = document.getElementById('myModal$i');

var btn = document.getElementById('myBtn$i');

var span = document.getElementsByClassName('close')[$i];

btn.onclick = function() {
    modal.style.display = 'block';
}

span.onclick = function() {
    modal.style.display = 'none';
}

window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = 'none';
    }
}
</script>

But it doesn't succeed, can anyone help me? Thanks!

Try this:

Declare the variable as a global. And Do with addEventListener()

 var modal;
    var btn;
    var span;
    for(var $i=0; $i<23; $i++){
     modal = document.getElementById('myModal'+$i);
     btn = document.getElementById('myBtn'+$i);
     span = document.getElementsByClassName('close')[$i];

    btn.addEventListener("click", function() {
        modal.style.display = 'block';
    })
    span.addEventListener("click", function() {
        modal.style.display = 'none';
    })
}
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = 'none';
        }
    }