Ruby on Rails 5.1 delete confirmation with Boostrap modal

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:

<%= link_to 'Delete' , article, method: :delete, data: { confirm: 'Are you sure?' } %>

I'm now struggling to make a customized delete confirmation using Bootstrap modal

The Bootstrap modal shows up but it deletes a wrong article. It always deletes the article on the top (the first one).

Versions:

• Bootstrap 4
• Rails 5.1.4

Code:

application.js

// app/assets/javascripts/application.js

//= require rails-ujs
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require_tree .

index.html.erb

<!-- app/views/articles/index.html.erb -->

<div class="container">
    <h1>My Blog</h1>

    <!-- Render Articles -->
    <%= render @articles %> 
</div>

_article.html.erb

<!-- app/views/articles/_article.html.erb -->

<div class="row">
  <div class="col-sm-8">
    <div class="card mb-3">
      
      <div class="card-body">
        <h4 class="card-title"><%= article.title %></h4>
        <p class="card-text"><%= @markdown.render(article.body).html_safe %></p>
      </div>

      <div class="card-footer">
        <!-- Delete Button showing the modal -->
        <button type="button" class="btn btn-outline-danger" 
             data-toggle="modal" data-target="#exampleModal">
          Delete
        </button>
      </div>

      <!-- Modal -->
      <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">

            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Delete Confirmation</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
              </button>
            </div>

            <div class="modal-body">
              Are you sure?
            </div>
            
            <!-- Delete button in the footer -->
            <div class="modal-footer">
              <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
              <%= link_to 'Delete', article, method: :delete, class: 'btn btn-outline-danger' %>
            </div>

        </div>
      </div>
    </div>
</div>

Rendered Views:

Here is the articles view:

The delete modal shows up, but it deletes the wrong item! Somehow, all delete buttons point to the first article.

I'm new to Ruby on Rails. Please help!