document.getElementById.addEventListener doens't work for all users inside a innerHTML

I'm getting data from firestore db and dynamically creating this layout with innerHTML:

enter image description here

Code:

    db.collection("xa").doc(user.uid).collection("xb").get()
  .then(querySnapshot => {
    querySnapshot.forEach(doc => {

      db.collection("xa").doc(user.uid).collection("xb").doc(doc.id).collection("local").get().then(querySnapshot2 => {
        querySnapshot2.forEach(doc2 => {

          //getting data from db
          var name = doc2.data().name;
          var estado = doc2.data().estado;
          var cidade = doc2.data().cidade;
          var rua = doc2.data().rua;
          var url_photo = doc2.data().profilePhoto;
          var status = doc2.data().state;

          document.querySelector('.card-body').innerHTML += `<div class="row" id="img_div">
          <div class="col-12 col-sm-12 col-md-2 text-center store">
            <img src=`+ url_photo + ` alt="prewiew" width="140" height="100">
          </div>
          <div id="text_div" class="col-12 text-sm-center col-sm-12 text-md-left col-md-6">
            <h4 class="product-name"><a href="#" onclick="`+console.log("xD")+`" id="title`+doc2.data().cnpj+`">`+ name + `</a></h4>
            <h4>
              <small>`+ estado + `</small>
            </h4>
            <h4>
              <small>`+ cidade + `</small>
            </h4>
            <h4>
              <small>`+ rua + `</small>
            </h4>
          </div>
          <div class="col-12 col-sm-12 text-sm-center col-md-4 text-md-right row">
          <div class="text-right">
              <input type="text" id="on/off`+ doc2.data().cnpj + `" disabled="disabled" class="input" value="" />
          </div>
          </div>
        </div>
       `
          document.getElementById("btn_on/off"+doc2.data().cnpj).addEventListener('click', function () {
            console.log("ckilado")
          });


        });
      });
    });
  });

There are data from 4 users that I received.

But the eventListener('click', function () { console.log(name) }); captures only the last layout created, "Dale Dale", the other 3 above are not caught: enter image description here

Any tips to how can i get all the clicks on the name?