Use id from Template strings item

Question

i'm having a trouble using the id from a template string item

const elementoParaInserirJogosNaLista = document.getElementById("listaJogos");

function exibirJogosNaTela(listaDeJogos) {
  elementoParaInserirJogosNaLista.innerHTML = "";
  listaDeJogos.forEach((jogo) => {
    elementoParaInserirJogosNaLista.innerHTML += `
        <div class="jogo">
        <a href="paginajogo.html">
        <img class="jogo__imagem" src="${jogo.imagem}" alt="${jogo.titulo}" />
        </a>
        <h2 class="jogo__titulo">${jogo.titulo}</h2>
        <p class="jogo__preco" id="preco">R$${jogo.preco}<a ><img class="jogo__carrinho" id="addCarrinho" src="./images/addcart.png" alt="Adicionar ao carrinho"/></p><a/>
        
        </div>
        `;
  });
}

i've tried to use the id "addCarrinho" and nothing happens

i'm newb on developing

const botoesAddCarrinho = [];
botoesAddCarrinho = document.querySelectorAll(".jogo__carrinho");
botoesAddCarrinho.forEach((evento) =>
  evento.addEventListener("click", addNoCarrinho)
);

function addNoCarrinho () {
  console.log('ok')
}

i've changed the selector to by the class, but nothings happens, is like the nothing was selected

i'm using the exibirNaTela on the fetch with the json

let jogos = [];
const endpointDaAPI ="jogos.json"

getBuscarJogosDaAPI();

async function getBuscarJogosDaAPI() {
  const respost = await fetch(endpointDaAPI);
  jogos = await respost.json();
  exibirJogosNaTela(jogos.jogos);
  
}