localStorageを利用したお気に入り機能で追加した情報を、サイドバーにすぐに反映させたい

Question

前提・実現したいこと

WordPressの記事一覧ページに、localStorageを利用したお気に入りボタンを付けています。
こちらのページ（https://magnets.jp/web_design/11793/）を参考に作成したのですが、別ページではなくサイドバーに表示させようとしています。

サイドバーに読み込みまではできているのですが、お気に入りボタンを押してもページをリロードするまでは表示されません。
リロードせずに表示させたり消したりしたいです。

試したこと

buttonをクリックしたときに、favorite.jsで処理をしてるものを読み込めれば良いのではと考え、下記を記事一覧ページに追記しました。
すると上書きではなくどんどん追加される形で表示されてしまいます。
buttonを押したときにid="favorite"部分のみを読み込む方法を教えていただけると嬉しいです。
どうぞよろしくお願いいたします。

<script type="text/javascript">
$('button').click(function () {
  //現在の登録内容を取得
  var favorite = JSON.parse(localStorage.getItem("favorite")) || [];

  //コンマ区切りの1つの文字列にする
  var ids = favorite.join(",");

  //格納する囲み
  var list = $("#favorite");

  //WPに引き渡すデータ
  var data = {
    //アクション名（任意の名前）
    action: "favorite",
    //お気に入り登録している記事ID
    id: ids,
  };

  //Ajax処理
  $.ajax({
    url: favorite_params.ajaxurl,
    data: data,
    type: "POST",
  }).then(
    //成功時
    function (data) {
      if (data) {
        list.append(data);
      }
    },
    //失敗時
    function () {
      alert("読み込みに失敗しました");
    }
  );
});
</script>

コード

<ul class="archive">
<?php
$args = array(
'posts_per_page' => -1 // 表示件数の指定
);
$posts = get_posts( $args );
foreach ( $posts as $post ): // ループの開始
setup_postdata( $post ); // 記事データの取得
?>
<li>
<h2 class="page-title"><?php the_title();?></h2>
<button class="add" data-id="<?php echo $post->ID; ?>">お気に入り登録</button>
</li>
（略）
<div class="sidebar">
<div id="favorite" class="favorite"></div>
</div>

<script>
jQuery(function($){
	$('.archive').on('click','.add',function(){
		//追加する記事ID
		var pid = $(this).data('id');
		if(pid){
			//現在の登録内容を取得
			var favorite = JSON.parse(localStorage.getItem('favorite')) || [];
			//既に登録済か調査
			var index = favorite.indexOf(pid);
			//未登録ならIDを追加
			if(index == -1){
				favorite.push(pid);
				//ローカルストレージに格納しなおす
				localStorage.setItem('favorite',JSON.stringify(favorite));
                //反転させる
                $(this).removeClass('add').addClass('remove').text('お気にいり解除');
			}
        }
	});
	$('.archive').on('click','.remove',function(){
		//除外する記事ID
		var pid = $(this).data('id');
		if(pid){
			//現在の登録内容を取得
			var favorite = JSON.parse(localStorage.getItem('favorite')) || [];
			//既に登録済か調査
			var index = favorite.indexOf(pid);
			//登録済ならIDを除外
			if(index != -1){
				favorite.splice(index,1);
				//ローカルストレージに格納しなおす
				localStorage.setItem('favorite',JSON.stringify(favorite));
				//反転させる
				$(this).removeClass('remove').addClass('add').text('お気にいり登録');
			}
		}
	});
    //現在の登録内容を取得
	var favorite = JSON.parse(localStorage.getItem('favorite')) || [];
	//登録内容数分繰り返し処理
	for(var i = 0; i < favorite.length; i++){
		//現在のID
		var id = favorite[i];
		//buttonのdata-id属性と上記IDが一致するものはaddクラスを外してremoveクラスを付与。テキストを変更する。
		$('button[data-id=' + id + ']').removeClass('add').addClass('remove').text('お気に入り解除');
	}
});
</script>
<script type="text/javascript">
$('button').click(function () {
  //現在の登録内容を取得
  var favorite = JSON.parse(localStorage.getItem("favorite")) || [];

  //コンマ区切りの1つの文字列にする
  var ids = favorite.join(",");

  //格納する囲み
  var list = $("#favorite");

  //WPに引き渡すデータ
  var data = {
    //アクション名（任意の名前）
    action: "favorite",
    //お気に入り登録している記事ID
    id: ids,
  };

  //Ajax処理
  $.ajax({
    url: favorite_params.ajaxurl,
    data: data,
    type: "POST",
  }).then(
    //成功時
    function (data) {
      if (data) {
        list.append(data);
      }
    },
    //失敗時
    function () {
      alert("読み込みに失敗しました");
    }
  );
});
</script>

↓functions.php

function favorite_ajax_scripts(){
	//お気に入り一覧ページのみ読み込み
	if(is_home() || is_page('favorite')){
		wp_enqueue_script('favorite', get_theme_file_uri('js/favorite.js'), array('jquery'));
		wp_localize_script('favorite', 'favorite_params', array(
			'ajaxurl' => admin_url('admin-ajax.php')
		));
	}
}
add_action('wp_enqueue_scripts', 'favorite_ajax_scripts');

add_action('wp_ajax_favorite', 'favorite_ajax_handler');
add_action('wp_ajax_nopriv_favorite', 'favorite_ajax_handler');//wp_ajax_nopriv_{アクション名} -> favorite.jsで指定したアクション名
function favorite_ajax_handler(){
	$post_ids = $_POST['id'];
	$post_ids = explode(',',$post_ids);
	$args = array(
		'posts_per_page'=>-1,
		'post__in'=>$post_ids
	);
	query_posts($args);
	if(have_posts()):
	echo '<ul class="archive">';
		while(have_posts()): the_post();
		?>
		<li>
			<h2><?php the_title(); ?></h2>
			<?php the_excerpt(); ?>
		</li>
		<?php
		endwhile;
	echo '</ul>';
	else:
	echo '<p>まだお気に入り登録がありません</p>';
	endif;
	die;
}

Answer 1

dataには追加したデータだけではなく、全データが返ってきているようですので
追記せずに置き換えてみてはいかがでしょうか。

    //成功時
    function (data) {
      if (data) {
        list.append(data);
      }
    },

list.append(data);
↓
list.html(data);

Comments

[yura53]

ありがとうございます！
当初はbutton.clickにしていましたが、関数にして上２つのbuttonで使えるようにしました。