Bootstrap model showing the same text each time - ruby-on-rails

Question

I am using bootstrap modal for showing a popup:
<% #yourphotos.each do |photo| %>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><%= name %></h4>
</div>
<div class="modal-body">
<p>
<% if photo.caption != nil %>
<%= photo.caption.text %>
<% else %>
nil text
<% end %>
</p>
</div>
<form class="navbar-form pull-left">
<input type="text" class="span2">
<button type="submit" class="btn">Comment</button>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<% end %>
Lets say I loop through the above and have 10 photos (in #yourphotos) my caption.text in each of the modals when I launch is the same each time even though when I view source I can see the 10 different modal captions..is this a JavaScript thing?

Answer 1

How do you open the modal? Maybe you keep on opening the same modal all the time?

Answer 2

Try one of Following (For bootstrap 3). It will remove the loaded data before open next time.
$( document ).ready(function() {
$("#myModal").on('hidden.bs.modal', function () {
$(this).data('bs.modal', null);
});
});
Or
$( document ).ready(function() {
$('#myModal').on('hidden.bs.modal', '.modal', function () {
$(this).removeData('bs.modal');
});
});
Or
$( document ).ready(function() {
$('#myModal').on('hidden.bs.modal', function () {
$(this).removeData('bs.modal');
});
});
Reference Link