@artwired, quite a complex piece of code!
Some observations: first of all, IMO, you should never post code containing an API key!
In this case, probably it does not matter , since the API is free, but it is better to always use the feature to read the required value from the environment as it is now available in Scrimba.
Re your specific problem, it seems to me that you are trying to access some DOM elements before they are actually created ( the for (let watchlistItem of watchlistArray) { is before the moviesHolder.innerHTML = movieDescription; whete you attach the newly created HTML to the DOM.
Moreover I suspect that operating on the classList of elements that you are creating dynamically in the same async function may not work as expected.
While probably it is not the best nor a “clean” solution, I remember that once I had a similar problem and solved it moving the “toggle” class logic outside the async, as an event handling for a visually “hidden” button - suppose it is referenced hiddenWatchlistBtnEl - and invoking it, inside the async, this button “click()” with a setTimeout(hiddenWatchlistBtnEl.click(), 0);.
(probably was something I found searching StackOverflow).
Finally I wonder why you are not using the data attribute to which you assigned the IMDB Id to univocally locate the associated “watchlist” button:
const addToWatchlistBtnHolder = document.querySelectorAll(
`[data-add-to-watchlist="${watchlistItem.imdbID}"]`);
then, using it, you can access the .parentNode and its children[1] to set the classList of the “Added” div.
I hope there is someone more experienced than me who can offer you a better solution, which can help all of us improve!
Happy debugging!