I am faced with a dilemma where I have more than eight modals on a single page, each having a unique CSS id. Initially, I had a JavaScript code snippet that worked perfectly for a sole modal, but it failed to target all the different CSS ids. As someone with limited knowledge in JavaScript, I am seeking a solution on how to dynamically target each modal using a counter variable.
<button class="fsc-modal-button">Read Bio</button>
<div class="fsc-modal" id="fsc-modal-1">
<div class="fsc-modal-content"><span class="fsc-modal-close">×</span</div>
</div>
<button class="fsc-modal-button">Read Bio</button>
<div class="fsc-modal" id="fsc-modal-2">
<div class="fsc-modal-content"><span class="fsc-modal-close">×</span</div>
</div>
<script type="text/javascript">
var button = document.getElementsByClassName('fsc-modal-button')[0];
var modal = document.getElementsByClassName('fsc-modal')[0];
var span = document.getElementsByClassName('fsc-modal-close')[0];
button.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>