localStorage Add to Cart

Question

I'm creating a simple add to cart feature using jQuery and localStorage. Everything works fine, but I cannot add a selected class to the Add to Cart button. Please help me to add and remove (toggle) the selected class.

I need the logic to set the class on the buttons based on whether or not the product is held in the JSON I am holding in localStorage.

var favorites = JSON.parse(localStorage.getItem('favorites')) || [];
var list = $("#fav-list");
var parent = list.parent();

function addFavList() {
  list.detach().empty().each(function(i) {
    for (var x = 0; x < favorites.length; x++) {
      $(this).append('<li>' + favorites[x] + '</li>');
      if (x == favorites.length - 1) {
        $(this).appendTo(parent);
      }

    }
  });
}

addFavList();

$(document).delegate('.cart', 'click', function(e) {
  var id = $(this).parent().html(),
    index = favorites.indexOf(id);

  if (!id) 
    return;

  if (index == -1) {
    favorites.push(id);
  } else {
    favorites.splice(index, 1);
    $(this).parent().removeClass('fav');
  }

  localStorage.setItem('favorites', JSON.stringify(favorites));
  addFavList();
});


$(document).delegate('#delete', 'click', function() {
  localStorage.clear();
  location.reload();
});

Please check this Fiddle where I have tried my best

Answer 1

I have little workout in your fiddle and i think may be its now as you want.

Its now toggling class selected on deleting and adding to cart.

I have edited fiddle and here is code.

var favorites = JSON.parse(localStorage.getItem('favorites')) || [];


var list = $("#fav-list");
var parent = list.parent();

function addFavList(){
      $(document).find('.cart').removeClass('selected');
      list.detach().empty().each(function(i){

      for (var x = 0; x < favorites.length; x++){
           $(this).append('<li>' + favorites[x] + '</li>');

           $('.list li').each(function(){
               if($(this).html() == favorites[x]){
                   $(this).find('.cart').addClass('selected')
               }
            });
            if (x == favorites.length - 1){
            $(this).appendTo(parent);


           }
       }
    });

}
addFavList();

$(document).delegate('.cart', 'click', function(e){
    $(this).removeClass('selected');
    var id = $(this).parent().html();

    var index = favorites.indexOf(id);


    if (!id) return;
        if (index == -1) {
        favorites.push(id);
        $(this).addClass('selected');
    } 
    else {
       favorites.splice(index, 1);
       $(this).parent().removeClass('fav');
       $(this).removeClass('selected');
    }

    localStorage.setItem('favorites', JSON.stringify(favorites));
    addFavList();
});


$(document).delegate('#delete', 'click', function(){
   localStorage.clear();
   location.reload();   
   $(document).find('.cart').removeClass('selected');
});

I'm not sure its totally satisfactory to you but hope it will be useful.

Here is fiddle link also. please try will clearing localstorage. https://jsfiddle.net/8adbjstz/75/