Tengo 2 contenedores titulados learn__container y quiero que aparezca uno dependiendo del botón que se presione. Entonces, por ejemplo, si presiono el botón Hola, quiero que aparezca también el contenedor que tiene el encabezado hola. Si presiono el botón de despedida quiero el contenedor que tiene el encabezado de despedida. ¿Hay una manera fácil de hacer esto sin hacer que los nombres de identificación sean únicos para cada botón y contenedor? ¿O debo dar nombres de identificación/clase únicos y seleccionarlos a ambos y aplicar un detector de eventos a ambos botones?

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) }) })