Bootstap carousel with Ruby keeps showing the last image - ruby

Question

I am working on a dinamic photos carousel using Ruby and bootstrap ligthbox carousel, but i cannot make it work properly. when clicking on an image of the carousel to open that image in a modal keeps showing the last closed photo and not the photo I am clickin on. Any help will be appreciated, thanks.
<div class="container">
<div class="row d-flex flex-wrap align-items-center" data-toggle="modal" data-target="#lightbox">
<% #photos.each do |photo| %>
<div class="col-12 col-md-6 col-lg-3">
<img src="<%= cl_image_path photo.photo.key %>"/>
</div>
<% end %>
</div>
<!-- Modal -->
<div class="modal fade" id="lightbox" role="dialog" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<button type="button" class="close text-right p-2" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div id="myCarousel" data-ride="carousel" class="carousel slide">
<ol class="carousel-indicators">
<% #photos.each_with_index do |photo, n| %>
<li data-target='#MyCarousel' data-slide-to="#{n}" class="#{'active' if n == 0}"></li>
<% end %>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block w-100" src="<%= cl_image_path #photos.first.photo.key %>">
</div>
<% #photos.drop(1).each do |photo| %>
<div class="carousel-item">
<img class="d-block w-100" src="<%= cl_image_path photo.photo.key %>">
</div>
<% end %>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
`