Twój kod:

/* [in progress] find the clickable trigger (the element that should react to clicking) */

const trigger = document.querySelector(".product__header i");

/* [done] START: click event listener to trigger */
trigger.addEventListener("click", function() {


Jak powinno być:

 /* [in progress] find the clickable trigger (the element that should react to clicking) */

const trigger = thisProduct.element.querySelector(".product__header i");

/* [done] START: click event listener to trigger */
trigger.addEventListener("click", function() {


Ty triggerowałeś wszystkie <i> na całej stronie dlatego otwierały się wszystkie na raz. A tak na prawdę chciałeś żeby na kliknięcie reagował tylko <i> w konkretnym produkcie.

W thisProduct.element jest przechowywany artykuł danego produktu (<article>) - i to w nim powinniśmy dopiero szukać tego <i>