jquery - 更新時にスタイルが 1 つのアンカーにのみ適用される

Question

ローカル ストレージを使用して値を配列に保存し、配列内の値に応じてアンカーのスタイルを変更しています。アンカーの 1 つをクリックして更新するとスタイルが適用されますが、2 つのアンカーを選択してスタイルが消えます。

 $(function(){
       var favorite = localStorage.getItem( 'favorite' ); 
       if (favorite  !== null){
          favorite = JSON.parse(favorite) || [];
       } 
       $('.favorites' ).each(function() {
          if($(this).attr('data-petid') == favorite){
            $(this).css('background-image', 'url(../assets/img/heart-red.svg)');
            $(this).css('background-color', '#fefefe');
          }
       });
      // This function changes the color of the heart on the landing page and stores the values into local storage
      $(".favorites").click(function() {

        var favorite = localStorage.getItem( 'favorite' );
        var petid = $(this).attr('data-petid');
        var index;

        favorite = JSON.parse(favorite) || [];

        if ((index = favorite.indexOf(petid)) === -1) {
           favorite.push(petid);
           $(this).css('background-image', 'url(../assets/img/heart-red.svg)');
           $(this).css('background-color', '#fefefe');
       }else {
           $(this).css('background-image', 'url(../assets/img/heart-full.svg)');
           $(this).css('background-color', '#25aae3');
           favorite.splice(index, 1);
       }
       localStorage.setItem('favorite', JSON.stringify(favorite) );

    });

  });