Necesito agregar un addEventListener a un boton que esta dentro de un then en un fetch, el problema esta que el boton no registra el click:
fetch(listaSeriesPopulares)
.then(results =>results.json())
.then(shows=>{
shows.forEach(show => {
seriesPopulares.innerHTML+= `<div class="cardContainer">
<img class ="portada" src='https://www.themoviedb.org/t/p/w440_and_h660_face${show.poster_path}'>
<div class="containerRating">
<div class="circle">
<p class="ratingAverage">${show.vote_average}</p>
</div>
</div>
<div class="tituloShow">${show.name}</div>
<div class="contenedorBtn">
<button class="btnWatchlist" id="btnWatchlist${show.id}">Agregar a Watchlist</button>
<button class="btnColeccion" id="btnColeccion${show.id}">Agregar a Coleccion</button>
</div>
</div>
`
const btnColeccion = document.getElementById(`btnColeccion${show.id}`)
console.log(btnColeccion);
btnColeccion.addEventListener("click",()=>{
console.log("prueba")
})
});
})
.catch(error=>console.error(error))
no tengo claro como resolverlo, creo que el problema esta en que el fetch no lo acepta. Podria ser que primero tendria que traer la informasion del archivo json a un array y trabajar con el array? Gracias de antemano.