I'm iterating over a collection of elements and trying to get AJAX to work properly on a specific element within the collection. I'm nesting a few partials in order to iterate over these items and use a js.erb call like this:

$('#favorite_form').html("<%=j render partial: 'shared/unfavorite', locals: { mission: @mission } %>");

This only seems to change the 1st item in the collection even though I could be clicking the 5th item down the list, for example.

Question: How can I specify (via .js and AJAX) which element to update? Is this jQuery call not specific enough to the individual element? The code works in regular HTTP requests, so I'm wondering if there is a way to specify the individual element, but I thought that's what partials did :/

Example View ( _favorites.html.erb )

<div id="favorite_form">
  <% if you_favorited_this?(current_user, mission) %>
    <%= render partial: 'shared/unfavorite', locals: { mission: mission } %>
  <% else %>
    <%= render partial: 'shared/favorite', locals: { mission: mission } %>
  <% end %>
</div>