I have 2 containers titled learned__container and I want one to pop up depending on which button is pressed. So for example, if I press the Hello button I want the container that has the header hello to pop up as well. If I press the goodbye button I want the container that has the header of goodbye. Is there an easy way to do this without making the id names unique for each button and container? Or do I need to give unique class/id names and select them both and apply an event listener to both buttons?

HTML:

<button id="subheader--link">Hello</button>
<button id="subheader--link">Goodbye</button>

<div class="hide--learn learned__container">
          
    <h1>Hello</h1>
        
 </div>

<div class="hide--learn learned__container">

     <h1>Goodbye</h1>
        
</div>

JS:

const overlay = document.querySelector('.overlay');
const learnContainer = document.querySelector('.learned__container');
const link = document.querySelectorAll('#subheader--link');

link.forEach(link => {
    link.addEventListener('click', function (e) {
        overlay.classList.remove('hide--overlay');
        console.log(link)
        console.log(e)    
    })
})