Dynamically generated cards with JS

I'm trying to make a some dynamically generated bootstrap cards with a button clearing the page and showing the info (which I have stored on a Firebase project). I managed to make the cards show properly but I'm blocked and can't find a way to make each button show a different information.

So basically I have this:
Cards
Content showing

It has to be something close to the eventListener or another way to write the code... I think the way I did it is why its showing all the information on the same card, but how can I write the code right? I'm trying for 2 days and can't work around it.

OBS: I know my code can be a little messy or could be best ways to do some stuff but I'm still learning.

import { getWikiTI } from './prevenirWiki.js'

const dataCard = document.getElementById('data');

async function loadData() {
  let i = 0;
  const data = await getWikiTI()

  dataCard.innerHTML = data.map(d => `
    <div class="card border-primary mb-3 fb-item" style="max-width: 20rem;">
    <div class="card-header">${d.setor}</div>
    <div class="card-body">
      <h4 class="card-title">${d.descricao}</h4>
      <button type="button" class="btn btn-lg btn-primary fb-item" id="carregar-card">Carregar</button>
    </div>
  </div>
   `,
    console.log(data),
    console.log(i)
  ).join('')

  const btnCarregar = document.getElementById('carregar-card')

  btnCarregar.addEventListener('click', () => {

    dataCard.innerHTML = data.map(function (d) {
      return `${d.conteudo}`;
    })

    document.body.appendChild(dataCard)
  })

}

document.onload = loadData();

EDIT: Alright ! I managed to get it working... not the best code in the world but it's something :) If anyone has any opinions or ideias on how to improve it, im all ears.

    import { getWikiTI } from './prevenirWiki.js'
    
    const dataCard = document.getElementById('data');
    
    async function loadData() {
      let i = 0;
      const data = await getWikiTI()
    
      dataCard.innerHTML = data.map(d => `
        <div class="card border-primary mb-3 fb-item" style="max-width: 20rem;">
        <div class="card-header">${d.setor}</div>
        <div class="card-body">
          <h4 class="card-title">${d.descricao}</h4>
          <button type="button" class="btn btn-lg btn-primary fb-item" id="carregar-card${i++}">Carregar</button>
          <p hidden class="card-text">${d.conteudo}</p>
        </div>
      </div>
       `,
      ).join('')
    
    
      for (let i = 0; i <= data.length; i++) {
        let btnCarregar = document.getElementById(`carregar-card${i}`)
    
        btnCarregar.addEventListener('click', () => {
    
          dataCard.innerHTML = data[i].conteudo;
    
          document.body.appendChild(dataCard)
    
        })
      }
    }
    
    document.onload = loadData();