Q:

Different value between the console and the view

I have a "wtf" problem that I don't understand.
I have a view where the user can see all his pictures. On each picture, there's an icon to delete a picture. This icon opens a modal where there's a link to delete the picture. But every links goes to delete the first picture in the view.
The most weird is that:
= picture_path(picture)
# => path of the first picture

- puts picture_path(picture)
# => path of the right picture

How is it possible?
This is a part of my views:
_gallery.slim
.row
  - pictures.each do |picture|
    .col-xs-10.col-xs-offset-1.col-sm-6.col-sm-offset-0.col-md-4.col-lg-3
      # Some code
        .caption id="pictures-#{picture.id}"
          .row
            - if current_user == @user
              = render 'pictures/form_position', picture: picture # => Here we go

_form_position.slim
.caption-edit.d-block
   .col-lg-6.col-md-6.col-xs-6
      div
         span> Position
         span.hide-if-edit
            => picture.position
         span.icon.icon-edit.picture-position-icon.hide-if-edit
         span.icon.icon-delete.hidden.picture-position-icon.position-form data-toggle= 'modal' data-target= '#delete-picture-modal'
         = render 'pictures/destroy_picture_modal', picture: picture # => My modal
   .col-lg-6.col-md-6.col-xs-6.position-form.hidden
      = simple_form_for picture, remote: true do |f|
         = hidden_field_tag(:position)
         = f.input :position, wrapper: :vertical_input_group, label: false do
            = f.input_field :position, value: picture.position, class: 'form-control'
            .input-group-btn
               = button_tag type: 'submit', class: 'btn btn-primary' do
                  i.icon.icon-check

_destroy_picture_modal.slim
.modal.fade#delete-picture-modal tabindex= '-1' role= 'dialog' aria-hidden= 'true'
   .modal-dialog role= 'document'
      .modal-content
         .modal-header
            button type="button" class="close" data-dismiss="modal" &times;
            h5.modal-title Delete the picture
         .modal-body
            p Are you sure?
         .modal-footer
            = button_tag 'Cancel', type: 'button', class: 'btn btn-secondary', data: { dismiss: 'modal' }
            = link_to picture_path(picture), method: :delete do # => Where there's a problem
               = button_tag 'Delete', type: 'button', class: 'btn btn-primary'

I remind you:
= picture_path(picture)
# => return the path of the first picture

- puts picture_path(picture)
# => return the right path

Do you see something wrong in my code?

A:

You are using one id identifier for multiple modals:
data-target= '#delete-picture-modal'

Multiple modals are being rendered, but you are always targeting the "first" one when clicking the delete icon.
You need to assign a unique id to each modal, and target it accordingly. (Or, populate the modal via some asynchronous javascript.)

