How can I use getElementsbyClassName?

How can I use getElementsByClassName? I have many cards that has like this

         <div class="user-card Info-btn" id="Info-btn" style="display: flex; width: 400px;">
            <div class="left-card">
              <img src="" onError="this.onerror=null;this.src='{{ asset('img/not-found.jpg') }}';" style="display: block; margin-left: auto; margin-right: auto;" alt="">
            </div>
            <div class="right-card">
              <div class="right-top">
                <div style="padding-top: 15px;">
                  <h1 class="user-name"></h1>
                  <h1 style="color: #B4B4B4; font-size: 10px;"></h1>
                </div>
              </div>
              <div class="right-bottom">
                <h1>Admin</h1>
              </div>
            </div>
          </div>

And what I want to is when you click a card a modal will display

My JS looks like this

var infomodal = document.getElementById("info-modal");
      
      // Get the button that opens the modal
      var infobtn = document.getElementsByClassName("Info-btn")[0];
      
      // Get the <span> element that closes the modal
      var infospan = document.getElementsByClassName("infoclose")[0];
      

      // When the user clicks the button, open the modal 
      infobtn.addEventListener("click", function(){
        infomodal.style.display = "block";
      })
      
      // When the user clicks on <span> (x), close the modal
      infospan.addEventListener("click", function(){
        infomodal.style.display = "none";
      })
      
      // When the user clicks anywhere outside of the modal, close it
      window.addEventListener("click", function(event){
        if (event.target == infomodal) {
          infomodal.style.display = "none";
        }
      })

It works but only the first card is able to display its modal and not the other cards.

>Solution :

getElementsByClassName returns a HTMLCollection (an array-like structure). Since you extract the first element of it (via [0]) and add an event listener only to the first element, it is obvious that only the first card is able to display it’s modal.

What you want instead is to add an event listener to each infospan element:

      var infomodal = document.getElementById("info-modal");
      
      // Get the button that opens the modal
      var infobtn = document.getElementsByClassName("Info-btn"); // <-- removed [0]
      
      // Get the <span> element that closes the modal
      var infospan = document.getElementsByClassName("infoclose"); // <-- same here
      

      // When the user clicks a button, open the modal 
      /*infobtn.addEventListener("click", function(){
        infomodal.style.display = "block";
      })*/
      Array.from(infobtn).forEach(btn => {
        btn.addEventListener('click', () => {
          infomodal.style.display = 'block';
        });
      });
      
      // When the user clicks on <span> (x), close the modal
      /*infospan.addEventListener("click", function(){
        infomodal.style.display = "none";
      })*/
      Array.from(infospan).forEach(span => {
        span.addEventListener('click', () => {
          infomodal.style.display = 'none';
        });
      });
      
      // When the user clicks anywhere outside of the modal, close it
      window.addEventListener("click", function(event){
        if (event.target == infomodal) {
          infomodal.style.display = "none";
        }
      })

EDIT

If you know that the number and ordering of the infospan elements equals the number and ordering of the infobtn elements, you can remove one of the .forEach iterations:

      var infomodal = document.getElementById("info-modal");
      
      // Get the button that opens the modal
      var infobtn = document.getElementsByClassName("Info-btn"); // <-- removed [0]
      
      // Get the <span> element that closes the modal
      var infospan = document.getElementsByClassName("infoclose"); // <-- same here
      

      // When the user clicks a button, open the modal 
      /*infobtn.addEventListener("click", function(){
        infomodal.style.display = "block";
      })*/
      Array.from(infobtn).forEach((btn, index) => {
        var span = infospan[index]; // <-- get the corresponding span

        btn.addEventListener('click', () => {
          infomodal.style.display = 'block';
        });
        span.addEventListener('click', () => {
          infomodal.style.display = 'none';
        });
      });
      
      
      // When the user clicks anywhere outside of the modal, close it
      window.addEventListener("click", function(event){
        if (event.target == infomodal) {
          infomodal.style.display = "none";
        }
      })