How to display different posts using Modals - ruby-on-rails

Question

I'm new to RoR and I've encountered a problem recently as I am trying to display different posts in different modals. To contextualize I have a Home page on which is displayed every post. Every post contains an author, a content, a like button and a comment button. I want the comment button to open a modal containing again the author's name, the content and an area to comment the post. The problem is that every modal that I click on contains the same author and the same content even if the comment button I clicked on is from a different post. To be precise the content displayed in the Modal is from the most recently posted post. Tell me if you need something in particular and I will be happy to edit this post with the code you'll ask me.
Displaying the posts:
<% #posts.each do |post| %>
<div class="media">
<a class="media-left" href="#">
<div class='circle-icon'>
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
</div>
</a>
<div class="media-body">
<h2 class="media-heading"><%= post.user.first_name %> <%= post.user.last_name %></h2>
<h4><%= post.content %> </h4>
<br>Submitted <%= time_ago_in_words (post.created_at) %> ago<br>
<%= button_to like_post_path(post), method: :put do %>Like<%= post.get_upvotes.size %>
<% end %>
<span class="glyphicon glyphicon-comment"></span> Comment
And here is my Modal:
<!-- Modal -->
<div class="modal fade .local-modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"><%= post.user.first_name %> <%= post.user.last_name %></h4>
</div>
<div class="modal-body">
<p><%= post.content %> </p>
<hr>
<fieldset class="form-group">
<label for="exampleTextarea">Write your comment:</label>
<textarea class="form-control" id="exampleTextarea" rows="3"> </textarea>
</fieldset>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" >Like</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Comment</button>
</div>
</div>
</div>
</div>
Here is my JS Script:
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
$('[data-toggle="popover"]').popover({ html : true});
});
$('#popover').popover({
html : true,
title: function() {
return $("#popover-head").html();
},
content: function() {
return $("#popover-content").html();
}
});
</script>