title: Ruby on Rails 5.1 delete confirmation with Boostrap modal
body: <p>I am making a simple blog application that has many articles. I successfully made a delete button for each article and the browser's default confirmation popup using:</p>
  <pre><code>&lt;%= link_to 'Delete' , article, method: :delete, data: { confirm: 'Are you sure?' } %&gt;
  </code></pre>
  <p>I'm now struggling to make a customized delete confirmation using <a href="https://getbootstrap.com/docs/4.0/components/modal/#live-demo" rel="nofollow noreferrer">Bootstrap modal</a></p>
  <p>The Bootstrap modal shows up but it deletes a wrong article. It always deletes the article on the top (the first one).</p>
  <p>Versions:</p>
  <ul>
  <li>Bootstrap 4</li>
  <li>Rails 5.1.4</li>
  </ul>
  <h2>Code:</h2>
  <p>application.js</p>
  <pre><code>// app/assets/javascripts/application.js
  
  //= require rails-ujs
  //= require jquery3
  //= require popper
  //= require bootstrap-sprockets
  //= require_tree .
  </code></pre>
  <p>index.html.erb</p>
  <pre><code>&lt;!-- app/views/articles/index.html.erb --&gt;
  
  &lt;div class=&quot;container&quot;&gt;
      &lt;h1&gt;My Blog&lt;/h1&gt;
  
      &lt;!-- Render Articles --&gt;
      &lt;%= render @articles %&gt; 
  &lt;/div&gt;
  </code></pre>
  <p>_article.html.erb</p>
  <pre><code>&lt;!-- app/views/articles/_article.html.erb --&gt;
  
  &lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-sm-8&quot;&gt;
      &lt;div class=&quot;card mb-3&quot;&gt;
        
        &lt;div class=&quot;card-body&quot;&gt;
          &lt;h4 class=&quot;card-title&quot;&gt;&lt;%= article.title %&gt;&lt;/h4&gt;
          &lt;p class=&quot;card-text&quot;&gt;&lt;%= @markdown.render(article.body).html_safe %&gt;&lt;/p&gt;
        &lt;/div&gt;
  
        &lt;div class=&quot;card-footer&quot;&gt;
          &lt;!-- Delete Button showing the modal --&gt;
          &lt;button type=&quot;button&quot; class=&quot;btn btn-outline-danger&quot; 
               data-toggle=&quot;modal&quot; data-target=&quot;#exampleModal&quot;&gt;
            Delete
          &lt;/button&gt;
        &lt;/div&gt;
  
        &lt;!-- Modal --&gt;
        &lt;div class=&quot;modal fade&quot; id=&quot;exampleModal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;exampleModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
          &lt;div class=&quot;modal-dialog&quot; role=&quot;document&quot;&gt;
            &lt;div class=&quot;modal-content&quot;&gt;
  
              &lt;div class=&quot;modal-header&quot;&gt;
                &lt;h5 class=&quot;modal-title&quot; id=&quot;exampleModalLabel&quot;&gt;Delete Confirmation&lt;/h5&gt;
                &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;
                &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
                &lt;/button&gt;
              &lt;/div&gt;
  
              &lt;div class=&quot;modal-body&quot;&gt;
                Are you sure?
              &lt;/div&gt;
              
              &lt;!-- Delete button in the footer --&gt;
              &lt;div class=&quot;modal-footer&quot;&gt;
                &lt;button type=&quot;button&quot; class=&quot;btn btn-outline-secondary&quot; data-dismiss=&quot;modal&quot;&gt;Cancel&lt;/button&gt;
                &lt;%= link_to 'Delete', article, method: :delete, class: 'btn btn-outline-danger' %&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
    
  
  <h2>Rendered Views:</h2>
  <p>Here is the articles view:</p>
  <p><a href="https://i.stack.imgur.com/51EJY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/51EJY.png" alt="Articles" /></a></p>
  <p>The delete modal shows up, but it deletes the wrong item! Somehow, all delete buttons point to the first article.</p>
  <p><a href="https://i.stack.imgur.com/SU3FL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SU3FL.png" alt="Delete confirmation" /></a></p>
  <p>I'm new to Ruby on Rails. Please help!</p>