Динамически созданный список дублируется

Question

У меня есть функция Javascript, которая добавляет элементы на основе массива объектов (Javascript).

Вот что функция для добавления элементов выглядит следующим образом:

function appendShopItem(shopItem) 
{ 
    // Create the list item: 
    item = document.createElement('li'); 

    // Set its contents: 
    item.appendChild(document.createTextNode( 
     shopItem.name + ' - ' + shopItem.cost + ' Gold' 
    )); 

    // Add it to the list: 
    list.appendChild(item); 

    var radio = document.createElement('button'); 
    var text = document.createTextNode("Buy " + shopItem.name + " for " + shopItem.cost + " Gold"); 
    radio.name = 'shop'; 
    radio.value = shopItem.name; 
    radio.id = "shop"; 
    radio.style.display = "inline-block"; 
    radio.style.textAlign = "left"; 
    radio.onclick = function() { 
     addValue(shopItem); 
    }; 

    var lineBreak = document.createElement("BR"); 
    document.body.appendChild(lineBreak); 
    radio.appendChild(text); 
    document.getElementById("centeredDiv").appendChild(radio); 
} 

shopItem бы объект в массиве, например:

shopItems = [ 
    { name: "Potion", cost: 10, description: "A healing liquid." }, 
]; 

Это создает что-то вроде этого:

Если I cl ick Leave Shop, он скрывает магазин. Если я после этого нажмите Enter Shop, он превращается в это:

Как вы можете видеть, Potion продублирована. Если я сделаю это снова, появятся три, и так далее и т. Д. Может ли кто-нибудь помочь мне, чтобы он отображал только один?

Answer 1

Решенный!

Я добавил id к самому list пункта, а не его contents, а затем уничтожили его позже.