javascript - Why is the array empty every time on click? -

so every time click on icon '.favorite i' should add object array. if click first time adds parent div array, on second time deletes first 1 , grabs last parent div.

i'm working 3 tabs called 'monday', 'tuesday' , 'favorites'. have toggle icon empty heart @ start 'favorite i'. if i'm in monday , click on icon, empty heart turns filled out , parent cloned , added '#fav' tab. when happens clone saved local storage. if people refresh page, can still see preferences.

when heart clicked in 1 of cloned divs specific div removed '#fav' , have removed array , local storage too.

to conclude, need save each cloned div array/local storage , able delete each 1 of array when these removed #fav tab.

how overcome issue? many thanks.

html

<div class="container">    <div class="tabs_main">        <div class="col-md-5"><a data-target="#mon" class="btn active" data-toggle="tab">monday</a></div>       <div class="col-md-5"><a data-target="#tue" class="btn active" data-toggle="tab">tuesday</a></div>       <div class="col-md-2"><a data-target="#fav" class="btn active" data-toggle="tab"><i class="fa fa-heart" aria-hidden="true"></i></a></div>     </div>     <div class="tab-content">       <div class="tab-pane active" id="mon">        <br>        <div class="spaces">          <div class="box-container">            <div class="box not-selected" id="box1">            <a href="#" class="favorite"><i class="fa fa-heart-o" aria-hidden="true"></i></a>          </div>          <div class="box-container">            <div class="box not-selected" id="box2">            <a href="#" class="favorite"><i class="fa fa-heart-o" aria-hidden="true"></i></a>          </div>        </div>      </div>       <div class="tab-pane" id="tue">        <br>        <div class="spaces">        </div>      </div>       <div class="tab-pane" id="fav">         <br>      </div>     </div> </div> 

js

$('div.tab-pane').on('click', '.favorite', function(e) {   var add = $(this).parent().parent();   add.each(function(){      if ($(add.find('.not-selected .favorite i').hasclass('fa-heart'))) {        var boxcontent = $(add).clone(true, true);       var showhide = $(boxcontent).find(".session").addclass('selected').removeclass('not-selected');       var = $(boxcontent).wrap('<p/>').parent().html();       $(boxcontent).unwrap();        var temparray = [];        temparray.push(get);        var myjsonstring = json.stringify(get);        var parsestring = $.parsejson(myjsonstring);        var finalstring = myjsonstring.replace(/\r?\\n/g, '').replace(/\\/g, '').replace(/^\[(.+)\]$/,'$1').replace (/(^")|("$)/g, '');        var final = localstorage.setitem('sessions', finalstring);        $("#fav").append(temparray);      };    }); }); 

fiddle: https://jsfiddle.net/itsfranhere/nbllc3l0/44/

your question title quite clear...
question , code provide prevents answer full assurance.

here provided code produces, attempt reproduce.

now if not bother code, think no 1 can deduct should exactly...
question in title can can answered by:

simple! declare (using var) temparray @ every click.
why not retain information (whatever supposed retain) of previous click.

i'm not "satisfied" of answer you... if not answers issue, please edit question more details. feel free fork codepen make more project.

---

edit

from of script, want save "favorited" divs localstorage. implies have remove them localstorage , favorites tab if 1 "unfavorited".

also, use id on "to cloned" element. extremely cautious this. id has be unique. if id usefull (which not obvious in provided code), ensure make unique when clone element.

i improved attempt remove spaces , line feeds in saved.

another advise have give use significative variable names in code. make code speak itself. readability helps!

here code, updated mentionned above. have close comments in code.

var temparray = [];  // clones $('div.tab-pane').on('click', '.favorite', function(e) {   e.preventdefault();    // elements play with... having significative variable names.   var heartlink = $(this);   var box = heartlink.parent('.box');   var container = box.parent('.box-container');   var favoritetab = $("#fav .spaces");    // don't know use 3 lines below.   var idfind = box.attr("id");   var idcomplete = ('#' + idfind);   console.log(idcomplete);    //toggle font awesome on click   heartlink.find('i').toggleclass('fa-heart fa-heart-o'); // .selected or not, need 2 classes toggle.   box.toggleclass("selected not-selected"); // toggle selected , not-selected classes    // clone div   var boxcontent = container.clone(true, true);    // change id   var thisid = boxcontent.attr("id")+"_cloned";   boxcontent.attr("id", thisid);    // html saved in localstorage   var = boxcontent.wrap('<p>').parent().html();   = get.replace(/\r?\n/g, "").replace(/>\s*</g, "><"); // remove line feeds , spaces   console.log(get);   boxcontent.unwrap();    // decide add or remove   if(box.hasclass("selected")){     console.log("add array")     temparray.push(get);      // add favorites tab     favoritetab.append(boxcontent);    }else{     console.log("remove array");     var index = temparray.indexof(get);     temparray.splice(index);      // remove favorite tab     favoritetab.find("#"+thisid).remove();   }    // save   localstorage.setitem('sessions', temparray.join(""));  });  // append item if localstorage detected if (localstorage["sessions"]) {   $("#fav .spaces").append(localstorage["sessions"]);   console.log( localstorage.getitem('sessions') ); } 

updated codepen