javascript InnerHTML adding cards only one time

I’m trying to add a bootstrap card inside a div called [itemscontainer] using javascript by document.getElementById("itemscontainer").innerHTML so i want the cards to be inserted inside the itemscontainer only one time like this :-

but the problem is the items cards keeps reapet them salves more than one time like:-

what i want is to clear the itemscontainer first before adding the cards and this is what i have tried so that the items will be only one cards for each item

// clear function
    function clear(){
        document.getElementById("ssst").innerHTML = ""
    }
    // listener append all items to the inventory
    window.addEventListener('message', (event) => {
        let data = event.data
        if(data.action == 'insertItem') {
            let name = data.items.name
            let count = data.items.count
            let icon  = data.items.icon
            if(document.getElementById("ssst").innerHTML == ""){
                clear()
            }else{
            document.getElementById("ssst").innerHTML += 
                "<div class='card holder'>"+
                        '<div class="card-body">'+
                            '<img src="icons\'+icon+'" style="position:absolute;left:15%;width:40px; height:36px;" alt="">'+
                            '<h4 id="counter">'+count+'</h4>'+
                        '</div>'+
                        '<span class="itemname">'+name+'</span>'+
                '</div>";'
            }
        }
    })

Answer

The real solution is to figure out why you are getting the items more than once. With the information you provided that is impossible for me to answer. So the only thing we can recommend is how to prevent items from being added more than once.

If your messaging system returns duplicates you can determine if you have seen it. If you do, replace it. Otherwise add it.

window.addEventListener('message', (event) => {
  const data = event.data;
  console.log(data)
  if (data.action == 'insertItem') {
    let name = data.items.name
    let count = data.items.count
    let icon = data.items.icon

    const html = `
      <div class='card holder' data-name="${name}">
        <div class="card-body">
          <img src="icons/${icon}" style="position:absolute;left:15%;width:40px; height:36px;" alt="${icon}">
          <h4 id="counter">${count}</h4>
        </div>
        <span class="itemname">${name}</span>
     </div>`;

    const elemExists = document.querySelector(`[data-name="${name}"]`);
    if (elemExists) {
      const parser = new DOMParser();
      const doc = parser.parseFromString(html, 'text/html');
      elemExists.replaceWith(doc.body);
    } else {
      document.getElementById("ssst").insertAdjacentHTML("beforeend", html);
    }
  }
});




window.postMessage({
    action: 'insertItem',
    items: {
      name: 'foo',
      count: 1,
      icon: 'foo'
    }
});

window.postMessage({
    action: 'insertItem',
    items: {
      name: 'bar',
      count: 40,
      icon: 'barrrrrr'
    }
});


window.postMessage({
    action: 'insertItem',
    items: {
      name: 'foo',
      count: 1000,
      icon: 'foo'
    }
});

<div id="ssst"></div>