javascript - Dynamically created list is being duplicated -

i have javascript function adds items based on object-filled (javascript) array.

here's function add items looks like:

function appendshopitem(shopitem) {     // create list item:     item = document.createelement( 'li' );      // set contents:     item.appendchild( document.createtextnode(          shopitem.name + ' - ' + shopitem.cost + ' gold'     ) );      // add list:     list.appendchild( item );      var radio = document.createelement( 'button' );     var text = document.createtextnode( "buy " + shopitem.name + " " + 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 object in array, example:

shopitems = [     { name: "potion", cost: 10, description: "a healing liquid." }, ]; 

this creates this:

if click leave shop, hides shop. if click enter shop, turns this:

as can see, potion has been duplicated. if again, 3 appear, , on , forth. can me displays one?

solved!

i added id list item itself, rather contents, destroyed later on.