One node isn't catch with for each loop JS

I have some issue with a for each loop and I don't understand what's happenned. I have 6 cards (all puts with JS, there is no html). I try to catch all cards IDs in the url when I click on them with a for each loop. All works good...for 5 cards ! No matter what I do, the 6th cards doesn't works.

When I look at the console, there is 6 nodes in the loop but the first is empty, I think it is the problem, but I don't know how to fix it !!! The NodeList(5) have 5 cards in place of 6 et the first is empty...

What the console.log show in browsers:

NodeList []
NodeList [ article#243.cardsLink]
NodeList [ article#243.cardsLink, article#930.cardsLink]
NodeList(3) [ article#243.cardsLink, article#930.cardsLink, article#82.cardsLink]
NodeList(4) [ article#243.cardsLink, article#930.cardsLink, article#82.cardsLink, article#527.cardsLink]
NodeList(5) [ article#243.cardsLink, article#930.cardsLink, article#82.cardsLink, article#527.cardsLink, article#925.cardsLink ]

My loop :

let cardsLinks = document.querySelectorAll('.cardsLink')
console.log(cardsLinks);
cardsLinks.forEach((cardsLinked)=>cardsLinked.addEventListener("click", ()=> { window.location = `photographer.html?id=${cardsLink.id}`}));

Html put with JS :

<article id="243" class="cardsLink"></article>
<article id="930" class="cardsLink"></article>
<article id="82" class="cardsLink"></article>
<article id="527" class="cardsLink"></article>
<article id="925" class="cardsLink"></article>
<article id="195" class="cardsLink"></article>

Anyone have a advice ?

Thanks a lot.

Gilles