I can only edit my first post - ruby-on-rails

Question

I'm currently facing a strange problem. I'm trying to implement the basics actions into an ajax window. And my problem is that when I'm trying to edit a ranch(like a post), it's always rendering the edit of my first ranch.
This is my code :
(ranch controller)
before_action :set_ranch, only: [:show, :edit, :update, :destroy]
def index
#ranches = current_user.ranches
end
private
# Use callbacks to share common setup or constraints between actions.
def set_ranch
#ranch = Ranch.find(params[:id])
end
(ranch/index)
<%- #ranches.each do |ranch| %>
<div class="box panel panel-default">
<h2><%=link_to ranch.name, ranch%></h2>
<div class="image_wrapper">
<%= link_to (image_tag "ranch.jpg"), ranch %>
</div>
<button type='button' class='btn btn-default' data-toggle='modal' data-target='#MyEditRanch' aria-hidden="true" remote="true" style="float:right; margin-top: 10px;">
<i class="fa fa-cog"></i>
</button>
</div>
<!-- modal Edit -->
<div id='MyEditRanch' class='modal fade' role='dialog' aria-hidden="true">
<div class="modal-dialog">
<div class='content'>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title">Edit <%=ranch.name%></h3>
</div>
<div class="modal-body">
<%= render 'form2', ranch: ranch%>
</div>
</div>
</div>
</div>
<!-- /modal Edit -->
<%end%>
( & my _form2)
<%= simple_form_for(ranch) do |f| %>
<%= f.error_notification %>
<% if ranch.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(ranch.errors.count, "error") %> prohibited this ranch from being saved:</h2>
<ul>
<% ranch.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="col-lg-6">
<div class="input-group" style=" margin-left: 70px;">
<div class="input" style="width: 400px; margin-top: -10px; text-align: center;" >
<%= f.input :name, label: false, style:"margin:0px;", placeholder: "Name of your ranch"%>
</div><!-- /btn-group -->
</div><!-- /input-group -->
<div class="form-actions" style="max-width: 300px">
<%= f.button :submit, style:"text-align:center; margin-left: 70px;" %>
</div>
<%= link_to "Delete", ranch_path(ranch), method: :delete, data: {confirm: "Are you sure that you want to delete this ranch ?"}, class: "btn btn-danger", style:"margin-left: 140px;" %>
<% end %>
</div>
So if you have any advice to solve this shit, you're welcome !!
Thanks in advance

Answer 1

In HTML, ids must be unique on the page.
ie there must be only one of them...
This means there must be only one div that has the id MyEditRanch...
Sometimes the browser lets you get away with it... but if you have JS that uses that id (eg to toggle a modal)... it will still go looking for the first instance of that id on the page to toggle... ie onlyt he first one.
If you want to display multiple ranches - each with their own edit modal... then you really must give each one its own unique id to toggle.
eg append the ranch's id to it in both the button and the edit-modal. eg
<button type='button' data-toggle='modal' data-target='#edit-ranch-<%= ranch.id %>' ...
<!-- and later -->
<div id='#edit-ranch-<%= ranch.id %>'