I have three buttons on my website, each with its own unique content that should display in a modal when clicked. However, I am experiencing an issue where regardless of which button I click, the same content from the last button added is displayed in the modal. Can someone please help me troubleshoot and fix this problem?
It would be greatly appreciated if this could be resolved by Monday, so any quick assistance is welcomed.
<div class="popup1">
<style>
/* CSS styling for the modal */
.modal {
(CSS styles here)
}
/* Additinal CSS styles for the modal content */
.modal-content {
(more CSS styles here)
}
(additional CSS code)
</style>
<!-- Button to trigger the modal -->
<button id="myBtn">Sponsors</button>
<!-- The Modal itself -->
<div id="myModal" class="modal">
<!-- Content inside the modal -->
<div class="modal-content">
(Content specific to this button)
</div>
</div>
<script>
// JavaScript functionality for opening and closing the modal
(JavaScript code here)
</script>
</div>
(Repeating structure for popup2 and popup3 with different content)