Rails4-autocomplete form with multiple inputs - HTML data-id-element overwritten

Question

I am trying to build a form that is going to suggest medicine name from database but will send ID of chosen medicine to create relation in my database.

I used autocomplete gem which works great, I also used their hint for getting ID out of elements name and this works fine as well but only to the point where there is ONE INPUT element on form. In my case I need 5 inputs and because of my code - it keeps overwritting element called my_medicine_id which causes that only one - last - element is being saved. Can you guys think of any solution for dynamically changing field name?

My PrescriptionsController

[...]
    def new
        @prescription =Prescription.new
        5.times { @prescription.relations.build }
    end
[...]

My view

[...]
        <ol>
            <%= f.fields_for :relations do |builder| %>
                <%= builder.hidden_field :medicine_id, :id => "my_medicine_id" %>
                <%= builder.autocomplete_field :medicine_name, autocomplete_medicine_name_relations_path, :id_element => '#my_medicine_id' %>
            <% end %>
        </ol>
[...]

generates final html:

<input id="my_medicine_id" type="hidden" rows="5" name="prescription[relations_attributes][0][medicine_id]"></input>
<input id="prescription_relations_attributes_0_medicine_name" type="text" rows="5" name="prescription[relations_attributes][0][medicine_name]" data-id-element="#my_medicine_id" data-autocomplete="/relations/autocomplete_medicine_name"></input>
<input id="my_medicine_id" type="hidden" rows="5" name="prescription[relations_attributes][1][medicine_id]"></input>
<input id="prescription_relations_attributes_1_medicine_name" type="text" rows="5" name="prescription[relations_attributes][1][medicine_name]" data-id-element="#my_medicine_id" data-autocomplete="/relations/autocomplete_medicine_name"></input>
<input id="my_medicine_id" type="hidden" rows="5" name="prescription[relations_attributes][2][medicine_id]"></input>
<input id="prescription_relations_attributes_2_medicine_name" type="text" rows="5" name="prescription[relations_attributes][2][medicine_name]" data-id-element="#my_medicine_id" data-autocomplete="/relations/autocomplete_medicine_name"></input>
<input id="my_medicine_id" type="hidden" rows="5" name="prescription[relations_attributes][3][medicine_id]"></input>
<input id="prescription_relations_attributes_3_medicine_name" type="text" rows="5" name="prescription[relations_attributes][3][medicine_name]" data-id-element="#my_medicine_id" data-autocomplete="/relations/autocomplete_medicine_name"></input>
<input id="my_medicine_id" type="hidden" rows="5" name="prescription[relations_attributes][4][medicine_id]"></input>
<input id="prescription_relations_attributes_4_medicine_name" type="text" rows="5" name="prescription[relations_attributes][4][medicine_name]" data-id-element="#my_medicine_id" data-autocomplete="/relations/autocomplete_medicine_name"></input>

So as you can see each time it overwrites element data-id-element="#my_medicine_id".

Answer 1

Solution by OP.

Solution found - moved inside of fields_for to a partial and used f.options[:child_index].

Fixed view file:

[...]
            <%= f.fields_for :relations do |builder| %>
                <%= render 'child_form', :f => builder %>
            <% end %>
[...]

And partial _child_form.html.erb

<% @it=f.options[:child_index] %>
<%= f.hidden_field :medicine_id, :id => "my_medicine_id#{@it}" %>
<%= f.autocomplete_field :medicine_name, autocomplete_medicine_name_relations_path, :id_element => "#my_medicine_id#{@it}" %>