Set value using Jquery in Select List on Nested Form

Hi, I am new to Rails.

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

I have nested form:

<%= f.fields_for :items do |i| %> <%= render ‘item_fields’, :f => i %> <% end %>
<%= link_to_add_association ‘+ product’, f, :items %>

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

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.

  1. 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.