javascript - how to update contents of a span tag? -

i creating web page user , select item clicking on button. details of item selected displayed in dropbox. @ moment can update quantity if user selects again. problem having is, if user first click on btnbuy1 (details displayed in dropbox), clicks on btnbuy2 (again, details displayed), when click on btnbuy2 again , details btnbuy2 updated details btnbuy1 disappears.

        $("#btnbuy0").click(function()         {             if (!sessionstorage['quantity0'])             {                 sessionstorage['quantity0'] = 1;                 $("#dropbox").append('<span id = "0"><img class = "thumb" src="../images/21_metoyou.jpg" />' + teddy[0].desc + ", price £"              + teddy[0].price + ", quantity: " + sessionstorage.getitem('quantity0') + "</span><br/>");              }                        else             {                 sessionstorage['quantity0']++;                 $("#dropbox").html('<span id = "0"><img class = "thumb" src="../images/21_metoyou.jpg" />' + teddy[0].desc + ", price £"              + teddy[0].price + ", quantity: " + sessionstorage.getitem('quantity0') + "</span><br/>");              }             if (modernizr.sessionstorage)              {  // check if browser supports sessionstorage                 myids.push(teddy[0].partnum); // add current username myids array                 sessionstorage["ids"]=json.stringify(myids); // convert string , put sessionstorage             }                else              {              // use cookies instead of sessionstorage             }         });         $("#btnbuy1").click(function()         {             if (!sessionstorage['quantity1'])             {                 sessionstorage['quantity1']=1;                 $("#dropbox").append('<span id = "1"><img class = "thumb" src="../images/birthday_metoyou.jpg" />' + teddy[1].desc + ", price £"              + teddy[1].price + ", quantity: " + sessionstorage.getitem('quantity1') + "</span><br/>");              }             else             {                 sessionstorage['quantity1']++;                 $("#dropbox").html('<span id = "1"><img class = "thumb" src="../images/birthday_metoyou.jpg" />' + teddy[1].desc + ", price £"              + teddy[1].price + ", quantity: " + sessionstorage.getitem('quantity1') + "</span><br/>");              }             if (modernizr.sessionstorage)              {  // check if browser supports sessionstorage                 myids.push(teddy[1].partnum); // add current username myids array                 sessionstorage["ids"]=json.stringify(myids); // convert string , put sessionstorage             }              else              {              // use cookies instead of sessionstorage             }         }); 

i'm not jquery person think problem caused fact you're incrementing count , replacing html in dropbox - vis

sessionstorage['quantity0']++;   $("#dropbox").html('<span id = "0"><img class = "thumb" src="..jpg" />' +  // there -------^^^^-----                          teddy[0].desc + ", price £"                      + teddy[0].price + ", quantity: " +                         sessionstorage.getitem('quantity0') + "</span><br/>"); 

shouldn't replacing contents of $("#0") not $("#dropbox") ?? ... i.e.

sessionstorage['quantity0']++;   $("#0").html('<img class = "thumb" src="..jpg" />' + teddy[0].desc +                       ", price £" + teddy[0].price + ", quantity: " +                       sessionstorage.getitem('quantity0'));