Unable to select classes in generated html codes

// Javascript codes

const handleGetJson = () => {
  const work = document.getElementById('works');

  fetch(`data.json`, {
    headers: {
      'Content-Type': 'application/json',
      Accept: 'application/json',
    },
  })
    .then((response) => response.json())
    .then((messages) => {
      const data = Object.values(messages);

      let container = '';

      data.forEach((item) => {
        const {
          title,
          description,
          technologies,
          image,
          link,
          linkText,
          link2,
          linkText2,
          id,
        } = item;

        const techno = Object.values(technologies);
        container =
          container +
          `
          <div class="card-${id}">
        <div class="card-1-2">
        <div class="image-container${id}"></div>
      </div>
      <div class="card-1-1">
        <h2 class="titre">${title}</h2>
        <ul>
          <li class="cano">CANOPY</li>
          <li class="dot empty"></li>
          <li class="dot">Back End Dev</li>
          <li class="dot empty"></li>
          <li class="dot">2015</li>
        </ul>
        <p class="desc">
          ${description}
        </p>
        <ul class="skills">
          <li>${techno[0]}</li>
          <li>${techno[1]}</li>
          <li>${techno[2]}</li>
          <li>${techno[3]}</li>
        </ul>
        <button type="button" class="btn-tonic">See project</button>
      </div>
      </div>
        `;
        work.innerHTML = container;
      });
    });
};
handleGetJson();

// pop up modal

const close = document.getElementsByClassName('close-modal')[0];
const modal = document.getElementById('popup');
const btn = document.querySelectorAll('.btn-tonic'); // unable to get all the buttons in the dynamically generated cards get all buttons

console.log(btn); // empty Nodelist




// HTML CODES

<section id="works" class="works"></section>