Локальное хранилище список избранных

Question

Я использую этот codepen в своем веб-приложении, и хотя он работает на веб-сайте, в моем случае, когда я обновляю страницу, только первый элемент списка помечается как избранный, независимо от того,какие из них были отмечены до обновления.

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

favorites.forEach(function(favorite) {
  document.getElementById(favorite).className = 'fav';
});

document.querySelector('.list').addEventListener('click', function(e) {
  var id = e.target.id,
      item = e.target,
      index = favorites.indexOf(id);

  if (!id) return;

  if (index == -1) {
    favorites.push(id);
    item.className = 'fav';

  } else {
    favorites.splice(index, 1);
    item.className = '';
  }

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

Любая помощь высоко ценится!

CodePen