First span (onclick) of html page not working

I have an Html page with cards this is my jade code:

          div(id="myModal" + i class="modal")
            div(class="modal-content")
              span(class="close" onclick="closeMoviePopup(#{i})") &times;
              h2= movie.name
              a(href="sodaplayer:?url=" + movie.magnet_link + "&title=" + movie.name onclick="(function(){ document.getElementById('myModal#{i}').style.display = 'none'; })();return true;") Stream

js:

function closeMoviePopup(index) {
    document.getElementById('myModal' + index).style.display = 'none';
}

For some reason, every card works except the first one I don't understand why that would happen. It is not a problem with the i variable or the function I don't get what it is

Solution

Because in you index.js you are capturing the first span var span = document.getElementsByClassName("close")[0]; and executing a different function. Fix that and it should work.