【いいね機能】非同期通信による部分テンプレート差し替えが、ページ最上部の投稿にしか反映されなかった話

エラー概要

一通り機能が実装できた後、挙動確認を行う。
⇨どのいいねボタンをクリックしても投稿一覧画面の一番上の投稿だけ表示が切り替わる。
ブラウザをリロードすると、クリックした箇所の表示が切り替わり、一番上の投稿は元に戻る。

結論

部分テンプレートを差し込む箇所の親要素のidに一意性がなかったのが原因。
（エラー概要から考えれば、機能は正常に動いているため、非同期による部分テンプレートを差し込む場所をきちんと指示できていないと予想できる。）

実装経緯と誤り箇所

いいね機能を実装している箇所の親要素に一意性のあるidを与える。

# 修正前
<div class="like_or_unlike">
  <%= render "likes/like", { post: post } %>
</div>

# 修正後
<div class="like_or_unlike", id="post_like_<% post.id %>">  #一意性を持たせるために投稿ごとのidを追加
  <%= render "likes/like", { post: post } %>
</div>

このタイミングでミスあり！
一意性を持たせるために、rubyの記述を差し込みpostごとのidを渡したつもりだったが、
「 = 」がついていない！！
このことによって投稿ごとのidは全て同じになっている。
検証ツールを利用して確認してみるとこんな感じ。

<div class="like_or_unlike", id="post_like_"> 
    省略                      　　　　　　　　　　　　# idが同じになっている
</div>
<div class="like_or_unlike", id="post_like_">   
    省略
</div>

よってidが重複しているため、一番初めに読み込まれたidを指定している要素のみ
非同期通信が適用される。

最後に

ご一読ありがとうございました。
誤りがありましたらご連絡ください！