'How can I get multiple different cards to link to different modals using vanilla js

I have 6 different cards all that display different content. Each card has a read more button and when clicked a modal shows up. The modal needs to show the content of the correct card that was clicked. how can I go about doing this?

I have got the modal functionality to work, just need help getting the correct card and modal pair to link together

card code:

<div class="card">
  <div class="info">
    <h5>This is to test card 1</h5>
    <div class="button">
      <a id="open-modal" class="btn">Read More</a>
    </div>
  </div>
</div>
<div class="card">
  <div class="info">
    <h5>This is to test card 2</h5>
    <div class="button">
      <a id="open-modal" class="btn">Read More</a>
    </div>
  </div>
</div>

modal code: 

<div class="modal">
      <div class="modal-box">
       <div class="modal-box__exit-button">
        <svg stroke="currentColor" fill="currentColor" stroke- 
      width="0" version="1.2" baseProfile="tiny"
        viewBox="0 0 24 24" class="btn" height="1em" width="1em" 
       xmlns="http://www.w3.org/2000/svg">
        <path
          d="M17.414 6.586c-.78-.781-2.048-.781-2.828 0l-2.586 2.586-2.586-2.586c-.78-.781-2.048-.781-2.828 0-.781.781-.781 2.047 0 2.828l2.585 2.586-2.585 2.586c-.781.781-.781 2.047 0 2.828.39.391.902.586 1.414.586s1.024-.195 1.414-.586l2.586-2.586 2.586 2.586c.39.391.902.586 1.414.586s1.024-.195 1.414-.586c.781-.781.781-2.047 0-2.828l-2.585-2.586 2.585-2.586c.781-.781.781-2.047 0-2.828z">
        </path>
      </svg>
    </div>
    <div class="modal-content">
      <h5>This is to test modal 1</h5>
    </div>
    <div class="modal-box__contact-button">
      <a href="#" class="bottom-button">Contact Us</a>
    </div>
  </div>
</div>
<div class="modal">
      <div class="modal-box">
       <div class="modal-box__exit-button">
        <svg stroke="currentColor" fill="currentColor" stroke- 
      width="0" version="1.2" baseProfile="tiny"
        viewBox="0 0 24 24" class="btn" height="1em" width="1em" 
       xmlns="http://www.w3.org/2000/svg">
        <path
          d="M17.414 6.586c-.78-.781-2.048-.781-2.828 0l-2.586 2.586-2.586-2.586c-.78-.781-2.048-.781-2.828 0-.781.781-.781 2.047 0 2.828l2.585 2.586-2.585 2.586c-.781.781-.781 2.047 0 2.828.39.391.902.586 1.414.586s1.024-.195 1.414-.586l2.586-2.586 2.586 2.586c.39.391.902.586 1.414.586s1.024-.195 1.414-.586c.781-.781.781-2.047 0-2.828l-2.585-2.586 2.585-2.586c.781-.781.781-2.047 0-2.828z">
        </path>
      </svg>
    </div>
    <div class="modal-content">
      <h5>This is to test modal 2</h5>
    </div>
    <div class="modal-box__contact-button">
      <a href="#" class="bottom-button">Contact Us</a>
    </div>
  </div>
</div>
javascripthtmlcss


Solution 1:[1]

You can find them with custom data that connect with the element you clicked on

function showModal(){
  alert(document.querySelectorAll("[data-target='"+this.id+"']")[0].innerText);
}

document.addEventListener("DOMContentLoaded", function() {
  var cards = document.getElementsByClassName('card');
  for(var i = 0; i < cards.length; i++) {
      cards[i].addEventListener("click", showModal);
  }
});
.d-none{
  display:none;
}
<div class="card" id="1">One</div>
<div class="card" id="2">Two</div>
<div class="card" id="3">Three</div>
<div class="card" id="4">Four</div>
<div class="card" id="5">Five</div>
<div class="card" id="6">Six</div>

<div data-target="1" class="d-none">Description 1</div>
<div data-target="2" class="d-none">Description 2</div>
<div data-target="3" class="d-none">Description 3</div>
<div data-target="4" class="d-none">Description 4</div>
<div data-target="5" class="d-none">Description 5</div>
<div data-target="6" class="d-none">Description 6</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Cédric

Related Questions