Can't delete all cards that were created by forEach

This forEach loop creates html elements (cards) when user click the button but if user click the button again all cards supposedly must be deleted. In my case when I click the button again only the first card is gone. I know that it smth has to do with id. I tried to do this () but I have no idea what to do next to delete all cards. thanks for attention

function getFood(){
    if (foodBtn.classList.contains("yes")){
        fetch("http://localhost:1314/getByType/food")
            .then((resp => {
                return resp.json();
            }))
            .then((resp) => {
                resp.forEach(elem => {
                    div.innerHTML += `<div id="MyFood">
               <div class="card" style="width: 18rem;">
                  <img src="${elem.image}" class="card-img-top" alt="...">
                    <div class="card-body">
                    <b>price: ${elem.price} $</b>
                     <p class="card-text">description: ${elem.description}</p>
                     <p class="card-text">amount: ${elem.amount}</p>
                    </div>
               </div>
               </div>`
                })
            })
        foodBtn.classList.remove("yes");
        foodBtn.classList.add("no");
    }else {
         const q = document.getElementById('MyFood');
         console.log(q);
         q.innerHTML = "";

        foodBtn.classList.remove("no");
        foodBtn.classList.add("yes");
    }
}

>Solution :

You are indeed right. In html IDs are unique so using the same ID for multiple instances may not work as expected. The solution is either add something in the generation that would create unique IDs such as

resp.forEach((elem, index) => {
                div.innerHTML += `<div id="MyFood${index}">
           <div class="card" style="width: 18rem;">
              <img src="${elem.image}" class="card-img-top" alt="...">
                <div class="card-body">
                <b>price: ${elem.price} $</b>
                 <p class="card-text">description: ${elem.description}      </p>
                 <p class="card-text">amount: ${elem.amount}</p>
                </div>
           </div>
           </div>`
            })

or use a class instead of an ID (I would personally go with this)

resp.forEach(elem => {
                div.innerHTML += `<div class="MyFood">
           <div class="card" style="width: 18rem;">
              <img src="${elem.image}" class="card-img-top" alt="...">
                <div class="card-body">
                <b>price: ${elem.price} $</b>
                 <p class="card-text">description: ${elem.description}</p>
                 <p class="card-text">amount: ${elem.amount}</p>
                </div>
           </div>
           </div>`
            })

Then to select and delete just call

const q = document.querySelectorAll('.MyFood');
for (let i = 0; i < q; i++) {
   q[i].remove();
}