Rails 4 best_in_place gem display issues with iterating through list

Question

I followed Railscast #302 to install the best_in_place gem for my app's shopping cart, and am now able to successfully update the item's quantity inline, as well as use the ajax success binding to update the div containing the total price for that item in my cart. However, I have a weird display issue that arises when trying to iterate over the full list of items in the cart.

When the user first lands on the cart, they see the following: .

When trying to update the quantity of either item; however, two columns appear for each line item. The first column (in both rows) contains the field matching the value for the first item's total, and the second column in both rows does the same for the second item's total:

This stray item continues to update properly if the quantity of the second item changes; however, the two issues are: 1) the stray item should not be where it is, and 2) the proper item on the same line as item #2 does not update.

Relevant code samples below, thanks in advance!

line_items_controller.rb

class LineItemsController < ApplicationController
  respond_to :html, :json 

  ...

  def update
    @line_item = LineItem.find(params[:id])
    @line_item.update_attributes(line_item_params)  
    respond_with @line_item
  end
end

shopping_carts/show.html.erb

<% @shopping_cart.line_items.each do |line_item| %>

  <div class="row">
    <div class="small-6 columns">
      <%= line_item.meal.name %> 
    </div>

    <div class="small-3 columns">
      <%= best_in_place line_item, :quantity, :as => :select, :collection => {"1" => 1, "2" => 2, "3" => 3, "4" => 4, "5" => 5} %>
    </div>

    <div class="small-3 columns line-item-total">
        <%= number_to_currency(line_item.total_price) %>
    </div>
  </div>

<% end %>

shopping_carts.js

$(function() {
  jQuery(".best_in_place").bind("ajax:success", function(data) {
    $(".line-item-total").load(location.href + " .line-item-total");
  });
});

Answer 1

Was able to solve this. The issue was related to needing to create unique IDs for each div. This was accomplished by using the line_item id in the div id itself.

shopping_carts/show.html.erb

<% @shopping_cart.line_items.each do |line_item| %>

    <div class="small-6 columns">
      <%= line_item.meal.name %> 
    </div>

    <div class="small-3 columns">
      <%= best_in_place line_item, :quantity, :as => :select, :collection => {"1" => 1, "2" => 2, "3" => 3, "4" => 4, "5" => 5} %>
    </div>

    <div id="line-item-total-<%= line_item.id.to_s %>-container" >
      <div class="small-3 columns" id="line-item-total-<%= line_item.id.to_s %>">
   </div>

<% end %>

shopping_carts.js

$(function() {
  jQuery(".best_in_place").bind("ajax:success", function(data) {
    id = $(data.currentTarget).data().id;
    $("#line-item-total-" + id + "-container").load(location.href + " #line-item-total-" + id);
    $("#cart-calculations").load(location.href + " #cart-calculations");  
  });
});