複数のモーダルウィンドウの設置について

現在swiperで記事一覧をスライド表示にしています。

１記事をクリックすると記事の詳細がモーダルで開くようにしたいと考えています。

複数のモーダルの設置について色々調べましたが、
「modal01」「modal02」などそれぞれにidをふる方法ではなく、
以下を参考に設置しました。
https://qiita.com/hacchi56/items/b365344ea8a4930b114f

wordpressで記事を管理する予定なので、id等をふることは避けたいです。

モーダルの表示はできたのですが、
表示される内容が全て最初の内容になってしまいます。

以下コードです。

html
1//スライドで表示される・モーダルクリック部分
2<div class="swiper-container">
3<div class="swiper-wrapper modal_trigger">
4<article class="swiper-slide">
5<a class="modal_btn">
6<h3>記事１つめ</h3>
7<p>記事１つめの内容...</p>
8</a>
9</article>
10
11<article class="swiper-slide">
12<a class="modal_btn">
13<h3>記事２つめ</h3>
14<p>記事２つめの内容...</p>
15</a>
16</article>
17
18<article class="swiper-slide">
19<a class="modal_btn">
20<h3>記事３つめ3</h3>
21<p>記事３つめの内容...</p>
22</a>
23</article>      
24</div>
25</div>   
26
27//モーダルで表示される部分     
28<div class="modal_area">
29<div class="modal_box">
30<div class="modal_bg"></div>
31<section class="modal_inner">
32<h3>記事1つめ</h3>
33<p>記事1つめの内容...</p>
34<div class="content">
35<p>記事1つめの内容詳細</p>
36</div>
37</section>
38</div>
39
40<div class="modal_area">
41<div class="modal_box">
42<div class="modal_bg"></div>
43<section class="modal_inner">
44<h3>記事２つめ</h3>
45<p>記事２つめの内容...</p>
46<div class="content">
47<p>記事２つめの内容詳細</p>
48</div>
49</section>
50</div>
51
52<div class="modal_area">
53<div class="modal_box">
54<div class="modal_bg"></div>
55<section class="modal_inner">
56<h3>記事３つめ</h3>
57<p>記事３つめの内容...</p>
58<div class="content">
59<p>記事３つめの内容詳細</p>
60</div>
61</section>
62</div>
63
64</div>

jQuery
1$(function () {
2  // モーダルのボタンをクリックした時
3  $('.modal_trigger .swiper-slide .modal_btn').on('click', function () {
4    var btnIndex = $(this).index(); // 何番目のモーダルボタンかを取得
5    $('.modal_area .modal_box').eq(btnIndex).fadeIn(); // クリックしたモーダルボタンと同じ番目のモーダルを表示する
6  });
7
8  // ×やモーダルの背景をクリックした時
9  $('.modal_close , .modal_bg').click(function () {
10    $('.modal_box').fadeOut(); // モーダルを非表示にする
11  });
12});

css
1.modal_box {
2  display: none;
3  height: 100%;
4  left: 0;
5  position: fixed;
6  top: 0;
7  width: 100%;
8  z-index: 9999;
9}
10
11.modal_bg {
12  background-color: rgba(30, 30, 30, 0.9);
13  height: 100%;
14  width: 100%;
15}
16
17.modal_inner {
18  background-color: #fff;
19  left: 50%;
20  padding: 40px;
21  position: absolute;
22  top: 50%;
23  -webkit-transform: translate(-50%, -50%);
24          transform: translate(-50%, -50%);
25  width: 90%;
26}