When I click the button on the elements, the overlay box only works with the first one and not the rest.
I have already tried adding two classes but it doesn't seem to be working. I read that this might be the issue, but I am struggling to make it work properly.
<div class="container">
<input type="button" value="Contact Now" id="Overlay" class="overlay"
/>
</div>
<div id="ogreModel" class="modalbox ogrebox" >
<div class="dialog">
<button title="Close" onClick="overlay()" class="closebutton" id="close">close</button>
<div style="min-height: 150px;">
</div>
</div>
</div>
<script>
// JavaScript code for functionality
document.getElementById("Overlay").addEventListener("click", function(){
var elem = document.getElementsByClassName("modalbox");
elem[0].style.display = 'block';
}) ;
document.getElementById("close").addEventListener("click", function(){
var elem = document.getElementsByClassName("modalbox");
elem[0].style.display= 'none';
});
</script>
What exactly needs to be changed in this code so that the rest of the elements display the box after clicking the button?