Previous cart data get removed by new data in JavaScript localStorage

Question

I want to make new div's with localStorage. It is working good except when I reload the page and click again to the bag button, the div's which I have made previously get replaced by the new ones. I want it to add new div's after the previously added div's. Any answers will be appreciated! Thank you so much!

 var addtobagbtn = document.getElementsByClassName('ovla-addtobag'); var tles = document.getElementsByClassName('prod-title'); for ( i = 0; i <addtobagbtn.length; i++) { var button = addtobagbtn[i]; button.addEventListener('click', function() { var button = event.target; var shopitem = button.parentElement.parentElement; var bagitems = document.getElementsByClassName('bagitems')[0]; var imgsrc = shopitem.getElementsByClassName('prod-img')[0].src; appendbag(); function add(imgsrc) { bagitems.insertAdjacentHTML("afterbegin",`<div class="bagrow"><div class="bagrowhead"><img src="${imgsrc}" class="bagprdimg" name="bagprdimg"></div><div class="bagrowleg"><button title="Remove From Bag" class="fas fa-times dltbag"></button><div class="bagprdinfo"><p class="bagprdtitle" title="Product Name">Girlfriend Regular Jeans</p><p class="prdbrand" title="Brand Name">H&M</p><p class="bagprdprice" title="Price">$24.99</p><p class="prdcolor" title="Color">Dark denim blue</p><p class="bagprdsize" title="Size">12</p><p class="prdcode" title="Product Code">0706016003</p><br><button class="far fa-heart movetofavbtn" title="Move To Bag"></button><span class="bagrowbtnbr"><label>Qty: </label><input type="number" value="1" name="indbagqty"title="Select Quantity" class="indbagqty bagrowfld" id="indbagqty"></span><span class="bagrowbtnbr"><label>Total: </label><input type="text" title="Total Price" class="indbagtotalprice bagrowfld" name="indbagtotalprice" readonly></span></div></div></div> `) } function appendbag() { add(imgsrc); localStorage.setItem("getbag",JSON.stringify( bagitems.innerHTML)); } }); }

 @import url('https://fonts.googleapis.com/css?family=Josefin+Sans|Muli|Noto+Sans+HK|Noto+Sans+SC|Quicksand|Sedgwick+Ave|Open+Sans+Condensed|Lato|Darker+Grotesque|Dosis|Roboto&display=swap'); *{ padding:0; margin:0; box-sizing: border-box; } body{ background-color: rgb(255, 255, 255); width:100%; margin:0; padding:0; } /*product patge wrapper*/.signup-banner{ text-transform: uppercase; position: relative; padding:20px 0px; background-color: rgb(211, 210, 210); text-align: center; font-family: 'Dosis',sans-serif; text-emphasis: 10; }.banfrm{ display:inline-block; margin:10px; }.banbtn{ background-color: #1a1a1a; color:rgb(184, 184, 184); width:100px; height:30px; border:none; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; }.prdpg-wrapper{ grid-area: pdwr; display:grid; grid-template-columns: repeat(5,1fr); grid-template-areas: "prodgrid prodgrid prodgrid prodgrid prodgrid"; } /*product page wrapper ends*/ /*leftbar*/.prdpg-lftbar::-webkit-scrollbar{ width:2px; }.prdpg-lftbar::-webkit-scrollbar-thumb{ background-color: #777777; border-radius: 2px 0px; -webkit-border-radius: 2px 0px; -moz-border-radius: 2px 0px; -ms-border-radius: 2px 0px; -o-border-radius: 2px 0px; }.prdpg-lftbar{ position:fixed; padding:200px 10px 0px 30px; grid-area: lftbar; display:none; height:100%; background-color: #fff; z-index:1; top:60px; }.prdpg-lftbar:hover{ overflow:scroll; }.lftbarul{ list-style:none; }.super-menuli-lftbar-title{ font-family:'Dosis',sans-serif; font-weight: bold; font-size:14px; }.super-menuli-lftbar{ font-size:14px; }.super-lftbar-menua{ text-decoration:none; color:rgb(59, 59, 59); font-family:'Dosis',sans-serif; } /*left bar ends*/ /*prod-grid*/.prod-grid{ grid-area: prodgrid; display:grid;/* grid-template-columns: repeat(auto-fit,minmax(200px,1fr));*/ grid-template-columns: repeat(2,48%); grid-template-rows:auto; grid-auto-flow:row; grid-gap:10px; justify-content: center; align-items:center; } @media screen and (max-width:319px){.prod-grid{ grid-template-columns: repeat(1,95%); } } @media screen and (min-width:768px){.prod-grid{ grid-template-columns: repeat(3,33%); } } @media screen and (min-width:1024px){.prod-grid{ grid-template-columns: repeat(4,24%); } }.prod-img{ width:100%; cursor: pointer; width:100%; }.prod-card{ width:100%; display:block; }.prod-head{ position:relative; }.prod-info{ width:100%; }.prod-titlea{ color:#1a1a1a; text-decoration:none; }.prod-titlea:hover{ color:#6a6a6a; text-decoration: underline; } /*card design*/.ovla-fav{ outline:none; border:none; position:absolute; background-color: #fff; bottom:15px; right:15px; width:30px; height:30px; border-radius:50%; cursor:pointer; box-shadow: 0px 0px 4px #000; font-size:16px;color:#ed4956; } #fav-saved{ position:absolute; top:9px; right:8px; z-index: -1; color: #ed4956; }.ovla-addtobag{ outline:none; border:none; position:absolute; background-color: #fff; bottom:50px; right:15px; width:30px; height:30px; text-align: center; line-height:25px; border-radius:50%; cursor:pointer; color: #3a3a3a; box-shadow: 0px 0px 4px #000; font-size:16px; transition: visibility.1s ease; -webkit-transition: visibility.1s ease; -moz-transition: visibility.1s ease; -ms-transition: visibility.1s ease; -o-transition: visibility.1s ease; }.prod-img:hover ~.ovla-addtobag{ visibility:visible; }.ovla-addtobag:hover{ visibility:visible; }.prod-leg{ position: relative; text-align:center; }.prod-title{ font-family:'Dosis',sans-serif; font-size:1rem; }.prod-price{ font-family:'Dosis',sans-serif; } /*prod hover elements*/.fa-plus{ position:absolute; top:11px; left:9px; color:#fff; font-size:.5rem; }.btmbtn{ margin-top:15px; height:30px; width:50%; border:none; background-color: #1a1a1a; color:rgb(180, 180, 180); cursor:pointer; border-radius:2px; outline:none; font-family:'Dosis',sans-serif; text-align:center; line-height:30px; -webkit-border-radius:2px; -moz-border-radius:2px; -ms-border-radius:2px; -o-border-radius:2px; }.btmbtn:hover{ background-color: #2a2a2a; }.btmbtn:active{ background-color: #2a2a2a; } /*prod hover elements ends*/ /*card design ends*/ /*prod grid-ends*/ /*media queries*/ @media screen and (min-width:1024px){.ovla-addtobag{ visibility:hidden; }.signup-banner{ margin:20px 1px; padding:100px 200px; right:-20.5%; width:78.7%; }.prdpg-wrapper{ display:grid; grid-template-columns: repeat(5,1fr); grid-template-areas: "lftbar prodgrid prodgrid prodgrid prodgrid"; }.prdpg-lftbar{ display:block; } } /*media queries ends*/ @import url('https://fonts.googleapis.com/css?family=Josefin+Sans|Muli|Noto+Sans+HK|Noto+Sans+SC|Quicksand|Sedgwick+Ave|Open+Sans+Condensed|Lato|Darker+Grotesque|Dosis|Roboto&display=swap'); *{ padding:0; margin:0; box-sizing: border-box; } body{ background-color: rgb(255, 255, 255); width:100%; margin:0; padding:0; } /*global variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variable*/.bag-wrapper{ position:relative; display:grid; grid-template-columns: 100%; grid-template-rows: auto; margin-left:1rem; }.bagpgtitle{ width:100%; font-family: 'Dosis',sans-serif; text-align:center; font-size: 40px; font-weight:bolder; padding:20px; }.bagrow{ display:grid; grid-template-columns: 1fr 2fr; grid-template-rows: 1fr.8fr; grid-template-areas: "baghd baghd" " bagleg bagleg"; row-gap: 20px; width:100%; border-bottom:1px solid rgb(195, 195, 195); margin-top:20px; }.bagrowhead{ grid-area:baghd; width:150px; position:relative; padding:5px; }.bagprdimg{ width:100%; }.bagprdtitle{ font-weight:bold; }.dltbag{ float:right; font-size:20px; padding:2px; background-color: #fff; color: #adadad; border:none; margin-top:2px; margin-right:5px; outline:none; }.dltbag:hover{ color:#fd4141; }.movetofavbtn{ border:none; font-size:1rem; padding:6px; background-color: #fff; outline:none; color:#ed4956; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; }.movetofavbtn:hover{ background-color: #ffcace; }.bagrowleg{ grid-area:bagleg; font-family:'Dosis',sans-serif; }.indbagqty{ width:60px; border:none; border-bottom:1px solid #ccc; font-family: 'Dosis',sans-serif; }.indbagtotalprice{ border:none; border-bottom:1px solid #ccc; width:60px; font-family:'Dosis',sans-serif; }.bagbuy{ padding:3rem 1rem 1rem 0rem; }.bagbuytitle{ font-family: 'Dosis',sans-serif; font-size:20px; font-weight: bold; color: #424242; padding-bottom:15px; }.bagnav{ padding:10px 0; justify-content:space-between; font-family:'Dosis',sans-serif; }.bagchk{ width:100px; float:right; margin-right:10px; text-align:right; font-family:'Dosis',sans-serif; border:none; }.bagchkoutbtn{ background-color: #525252; width:100%; height:50px; float:center; text-transform: uppercase; font-family:'Dosis',sans-serif; font-synthesis: style; letter-spacing: 2px; border:none; color: #ccc; margin-top:20px; } /*media queries*/ @media screen and (min-width:500px){.bagrow{ width:50%; } } @media screen and (min-width:768px){.bagrow{ display:flex; }.bagrowhead{ width:160px; }.bagbuy{ position:fixed; background-color: rgb(255, 255, 255); right:18%; top:190px; width:35%; padding: 50px; overflow:scroll; height:100%; word-wrap: wrap; }.bagbuy::-webkit-scrollbar{ visibility: none;; } } @media screen and (min-width:1024px){.bagrow{ width:30%; display:flex; }.rmvbagrow{ margin:0; padding:0; } } @media (min-width:767px) and (max-width:769px){.bagrowbtnbr{ display:block; }.bagrowfld{ float:right; }.rowtotalprice{ }.clstot{ margin-top:10px; } }

 <.DOCTYPE html> <html> <body> <a href="get:html">Go To Get</a> <div class="prod-grid"> <div class="prod-card"> <div class="prod-head" id="prod-head" name="prod-head"> <img class="prod-img" id="prod-img" name="prod-img" src="https.//lp2.hm?com/hmgoepprod.set=source[/05/0e/050e2b9f736cc7d1b9c0599dd988609a535e0e0f,jpg],origin[dam],category[ladies_jeans_slim],type[LOOKBOOK],res[y]:hmver[3]&call=url[file./product/main]"> <button class="far fa-heart ovla-fav" id="ovla-fav" ></button> <button class="ovla-addtobag" name="ovla-addtobag" id="ovla-addtobag" title="Add To Shopping Bag">bag</button> </div> <div class="prod-leg"><a href="#" class="prod-titlea"> <h6 class="prod-title">Sweatshirt shorts</h6></a> <p class="prod-price" id="prod-price">£8:99</p> <.--<button class="quicklook btmbtn" id="quicklookbtn">Quick look</button>--> </div> </div> <div class="prod-card"> <div class="prod-head" id="prod-head" name="prod-head"> <img class="prod-img" id="prod-img" name="prod-img" src="https.//lp2?hm.com/hmgoepprod,set=source[/d0/4f/d04fe64b84c228bd56365f2d5890e050b9f32475,jpg],origin[dam],category[],type[DESCRIPTIVESTILLLIFE]:res[y].hmver[1]&call=url[file:/product/main]"> <button class="far fa-heart ovla-fav" id="ovla-fav" ></button> <button class="ovla-addtobag" name="ovla-addtobag" id="ovla-addtobag" title="Add To Shopping Bag">bag</button> </div> <div class="prod-leg"><a href="#" class="prod-titlea"> <h6 class="prod-title">Sweatshirt shorts</h6></a> <p class="prod-price" id="prod-price">£8.99</p> <.--<button class="quicklook btmbtn" id="quicklookbtn">Quick look</button>--> </div> </div> <div class="prod-card"> <div class="prod-head" id="prod-head" name="prod-head"> <img class="prod-img" id="prod-img" name="prod-img" src="https?//lp2.hm,com/hmgoepprod,set=source[/7b/de/7bde5d2b5538c9584e5a8a48b73bbca8950c3c70,jpg],origin[dam],category[ladies_jeans_highwaisted]:type[LOOKBOOK].res[y].hmver[1]&call=url[file./product/main]"> <button class="far fa-heart ovla-fav" id="ovla-fav" ></button> <button class="ovla-addtobag" name="ovla-addtobag" id="ovla-addtobag" title="Add To Shopping Bag">bag</button> </div> <div class="prod-leg"><a href="#" class="prod-titlea"> <h6 class="prod-title">Sweatshirt shorts</h6></a> <p class="prod-price" id="prod-price">£8.99</p> <.--<button class="quicklook btmbtn" id="quicklookbtn">Quick look</button>--> </div> </div> </div> <;--This is where the div is created.;!!!!!!!!!!--> <div class="bagitems"></div> <!--script area !!!!!!!!!! !!!!!!!! !!!!!!!!! !!!!--> <script src="get.js"></script> <script> var saved = document.write(JSON.parse(localStorage.getItem('getbag'))); if (saved) { bagitems.innerHTML = saved; } </script> </body> </html>

Answer 1

I have tested this on my local and I guess the following fix is what you're looking for

var addtobagbtn = document.getElementsByClassName('ovla-addtobag');

var tles = document.getElementsByClassName('prod-title');



for (i = 0; i < addtobagbtn.length; i++) {
    var button = addtobagbtn[i];



    button.addEventListener('click', function() {
        var button_target = event.target;
        var shopitem = button_target.parentElement.parentElement;

        var bagitems = document.getElementsByClassName('bagitems')[0];
        var imgsrc = shopitem.getElementsByClassName('prod-img')[0].src;

        appendbag(imgsrc, bagitems);

    });

}


function add(imgsrc, bagitems) {
    bagitems.insertAdjacentHTML("afterbegin", `<div class="bagrow"><div class="bagrowhead"><img src="${imgsrc}" class="bagprdimg" name="bagprdimg"></div><div class="bagrowleg"><button title="Remove From Bag" class="fas fa-times dltbag"></button><div class="bagprdinfo"><p class="bagprdtitle" title="Product Name">Girlfriend Regular Jeans</p><p class="prdbrand" title="Brand Name">H&M</p><p class="bagprdprice" title="Price">$24.99</p><p class="prdcolor" title="Color">Dark denim blue</p><p class="bagprdsize" title="Size">12</p><p class="prdcode" title="Product Code">0706016003</p><br><button class="far fa-heart movetofavbtn" title="Move To Bag"></button><span class="bagrowbtnbr"><label>Qty: </label><input type="number" value="1" name="indbagqty"title="Select Quantity" class="indbagqty bagrowfld" id="indbagqty"></span><span class="bagrowbtnbr"><label>Total: </label><input type="text" title="Total Price" class="indbagtotalprice bagrowfld" name="indbagtotalprice" readonly></span></div></div></div>`);
}

function appendbag(imgsrc, bagitems) {
    add(imgsrc, bagitems);


    localStorage.setItem("getbag", JSON.stringify(bagitems.innerHTML));



}

The problem was you were using the variable name "button" twice in same scope and wrote the functions add() and appendbag() inside for loop. They should be outside the loop.