So I have a function that returns anime titles with little details using the JIKAN API. Basically, there's a search, user searches the anime and API returns a list of different animes based on the search with little info. When you click on more info, a modal should appear and tell you a bit more in-depth about the anime the user clicked on. Here's what I have
return `
<div class="card" style="width: 18rem;">
<div class="card-imagea">
<img class="card-img-top" src="${anime.image_url}" alt="Card image cap">
<div class="card-info">
<p class="card-text">Type: ${anime.type}</p>
<p class="card-text">Episodes: ${anime.episodes}</p>
<p class="card-text">Score: ${anime.score}</p>
</div>
<div class="card-body">
<button type="button" id="modalLaunch" class="btn btn-primary"onclick="document.getElementById('id01').style.display='block'">More Info</button>
</div>
</div>
<!--w3 modal example-->
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<div class="card-body"
<h5 class="card-title">${anime.title}</h5>
<p class="card-text">${anime.synopsis}</p>
<a href="${anime.url}" class="btn btn-primary">More!</a>
</div>
</div>
</div>
</div>
</div>
`
}).join("");
return `
<section>
<h3>${key.toUpperCase()}</h3>
<div class="card-row">${thereturnfunctionabove}</div>
</section>
`
}).join("");
}
The issue I'm having is the modal is not updating every time the user clicks on a new anime title. I want anytime the user clicks on the more info button to update the modal with info for whatever anime they click on.