Set value using Jquery in Select List on Nested Form

[Dante Gobetti]

Hi, I am new to Rails.

Been struggle finding solution for soooo long. Too long I think.

I have nested form:
    <div id="items">
      <%= f.fields_for :items do |i| %>
          <%= render 'item_fields', :f => i %>
      <% end %>
      <div class="links">
        <%= link_to_add_association '+ product', f, :items %>
      </div>
    </div>

with item_fields partial:
        <td><%= f.select :product_id,
                            Product.all.collect {|p| [p.name, p.id,
                            {'data-unit_cost'=>p.sell_price},
                            { class: 'product-chosen', id: 'product-select'} %>
        </td>
        <td><%= f.input :sell_price,
                        id: "price-input" %>
        </td>
        <td><%= link_to_remove_association image_tag("delete.png"), f %></td>

and coffee script:
  $("#product-select").change ->
    unit_cost = $('#product-select :selected').data('unit_cost')
    $('#price-input').val(unit_cost)

The idea is everytime product is selected, it store sell_price as value for sell_price input.

What I get is:
1. If I use 'product-select' and 'price-input' as class, the result is, the second row will duplicating the value from first row.

2. If 'product-select' and 'price-input' as id, the second row value is empty.

Gem I use: Cocoon, Simple_form, Chosen. The behaviour is the same without using Simple_form and Chosen gems.

I see that fields_for block will create hidden_field_id which I think could solve this, but I don't know how to access it and use it in script.

Any help would be appreciated.