１つのhtml内に複数のモーダル場合

こちらの方の質問と同じかと思いますが、こちらの回答で理解ができなかったので、質問させていただきます。
https://teratail.com/questions/211690
バナー1をクリックしたらバナー1、バナー2をクリックしたらバナー2、としていきたいのですが、
sectionで分けているからか、バナー4以降はクリックしても頭からになってしまいバナー1が開いてしまいます。
何か良い方法はないでしょうか。

よろしくお願いいたします。

html
1<!doctype html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>test</title>
6	<meta name="viewport" content="width=device-width, maximum-scale=1.0" />
7<link href="sample_style.css" rel="stylesheet" type="text/css">
8<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
9    <script>
10      $(function () {
11      
12        // モーダルのボタンをクリックした時
13        $('.modal_trigger .modal_btn').on('click', function() {
14          var btnIndex = $(this).index(); // 何番目のモーダルボタンかを取得
15          $('.modal_area .modal_box').eq(btnIndex).fadeIn(); // クリックしたモーダルボタンと同じ番目のモーダルを表示する
16        });
17      
18        // ×やモーダルの背景をクリックした時
19        $('.modal_close , .modal_bg').click(function(){
20          $('.modal_box').fadeOut(); // モーダルを非表示にする
21        });
22      });
23      
24    </script>
25
26</head>
27
28<body>
29<main>
30 
31	<section id="part1">
32		<h3 class="part1">その１</h3>
33        <div class="modal_trigger">
34         <div class="modal_btn">
35            <h2>バナー１</h2>         
36            <img class="image" src="image/banner1_small.jpg" alt="バナー1">
37          </div>
38          <div class="modal_btn">
39            <h2>バナー２</h2>
40				<img class="image" src="image/banner2_small.jpg" alt="バナー2">
41			</div>
42          <div class="modal_btn">
43            <h2>バナー３</h2>
44            <img class="image" src="image/banner3_small.jpg" alt="バナー3">
45          </div>
46        </div>
47             
48        <div class="modal_area">
49        <div class="modal_box">
50          <div class="modal_bg"></div>
51          <div class="modal_inner">
52            <div class="modal_block">
53              <p class="test">
54              <img src="image/banner1_large.jpg"  alt="バナー1"/></p>
55            </div>
56            <div class="modal_close">×</div>
57          </div>
58        </div>
59        <div class="modal_box">
60          <div class="modal_bg"></div>
61          <div class="modal_inner">
62            <div class="modal_block">
63              <p class="test">
64              <img src="image/banner2_large.jpg"  alt="バナー2"/></p>
65            </div>
66            <div class="modal_close">×</div>
67          </div>
68        </div>
69        <div class="modal_box">
70          <div class="modal_bg"></div>
71          <div class="modal_inner">
72            <div class="modal_block">
73              <p class="test">
74              <img src="image/banner3_large.jpg"  alt="バナー3"/></p>
75            </div>
76            <div class="modal_close">×</div>
77          </div>
78        </div>
79      </div>
80			</section>
81	
82    <section id="part2">
83		<h3 class="part2">その２</h3>
84         <div class="modal_trigger">
85         <div class="modal_btn">
86            <h2>バナー４</h2>         
87            <img class="image" src="image/banner4_small.jpg" alt="バナー4">
88          </div>
89          <div class="modal_btn">
90            <h2>バナー５</h2>
91				<img class="image" src="image/banner5_small.jpg" alt="バナー5">
92			</div>
93          <div class="modal_btn">
94            <h2>バナー６</h2>
95            <img class="image" src="image/banner6_small.jpg" alt="バナー6">
96          </div>
97        </div>
98        <div class="modal_area">
99        <div class="modal_box">
100          <div class="modal_bg"></div>
101          <div class="modal_inner">
102            <div class="modal_block">
103              <p class="test">
104              <img src="image//banner4_large.png"  alt="バナー4"/></p>
105            </div>
106            <div class="modal_close">×</div>
107          </div>
108        </div>
109        <div class="modal_box">
110          <div class="modal_bg"></div>
111          <div class="modal_inner">
112            <div class="modal_block">
113              <p class="test">
114              <img src="image//banner5_large.jpg"  alt="バナー5"/></p>
115            </div>
116            <div class="modal_close">×</div>
117          </div>
118        </div>
119        <div class="modal_box">
120          <div class="modal_bg"></div>
121          <div class="modal_inner">
122            <div class="modal_block">
123              <p class="test">
124              <img src="image//banner6_large.jpg"  alt="バナー6"/></p>
125            </div>
126            <div class="modal_close">×</div>
127          </div>
128        </div>
129        </div>
130			</section>
131
132<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
133    
134    </main>
135<footer>All Rights Reserved</footer>
136
137</body>
138</html>
139

css
1@charset "UTF-8";
2/* CSS Document */
3
4/* --------------------------------
5 * base
6 * -------------------------------- */
7
8html {
9	font-size: 62.5%;
10}
11body {
12	font-family: 'Lato', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
13}
14
15/* --------------------------------
16 * h1～h6
17 * -------------------------------- */
18h1 img {
19	width:100%;
20	max-width: 100%;
21	height: auto;
22}
23h2 {	
24    font-size: 1.6rem;
25	color: #525252;
26	margin: 10px 0;
27}
28h3 {	
29    font-family: 'Futura';
30    font-size: 3.6rem;
31    letter-spacing: .3rem;
32    line-height: 1;
33    font-weight: normal;
34	text-align: center;
35    margin-bottom: 30px;
36}
37
38.image {
39	padding: 100px;
40	background: #ccc;
41}
42/* --------------------------------
43 * banner
44 * -------------------------------- */
45#banner {
46	background: #f7f7f7;
47	padding: 60px 0 40px ;
48}
49.banner {
50	color: #e3a1a1;
51}
52.modal_trigger {
53	display: grid;
54	grid-template-columns: repeat(auto-fill, 332px);
55	justify-content: center;
56	grid-row-gap: 20px;
57	grid-column-gap: 20px;  
58	max-width: 1036px;
59	margin: 0 auto;
60}
61.modal_btn {
62	background: #fff;
63	padding: 1em;
64	border: solid #f7f7f7 1px ;
65	box-shadow: 0 6px 4px -4px rgba(0, 0, 0, 0.15);
66	margin: 5px;
67}
68.modal_btn:hover {
69	cursor: pointer ;
70}
71.modal_box {
72	display: none;
73	height: 100%;
74	left: 0;
75	position: fixed;
76	top: 0;
77	width: 100%;
78	z-index: 9999;
79}
80.modal_bg {
81	background-color: rgba(30, 30, 30, 0.9);
82	height: 100%;
83	width: 100%;
84}
85.modal_inner {
86	background-color: #fff;
87	left: 50%;
88	padding: 30px;
89	position: absolute;
90	top: 50%;
91	-webkit-transform: translate(-50%, -50%);
92    transform: translate(-50%, -50%);
93	max-width: 900px;
94}
95
96.modal_close {
97	cursor: pointer;
98	position: absolute;
99	right: 10px;
100	top: 0;
101	font-size: 2.0rem;
102}
103.test img {
104	width: 300px;
105}
106/* --------------------------------
107 * fooer
108 * -------------------------------- */
109
110footer{
111	background: #7e7e7e;
112	color: #fff;
113	text-align: center;
114	padding: 5px;
115	font-size: 0.8rem;
116}
117
118/*===============================================
119560px�ȏ�
120===============================================*/
121@media screen and (min-width: 560px) {
122/* --------------------------------
123 * h1�`h6
124 * -------------------------------- */
125h3 {
126    font-family: 'Futura';
127    font-size: 5.4rem;
128    letter-spacing: .3rem;
129    line-height: 1;
130    font-weight: normal;
131	text-align: center;
132    margin-bottom: 60px;
133}
134/* --------------------------------
135 * banner
136 * -------------------------------- */
137.test img {
138	width: 500px;
139}
140}	
141/*===============================================
142960px�ȏ�
143===============================================*/
144@media screen and (min-width: 960px){
145
146/* --------------------------------
147 * banner
148 * -------------------------------- */
149.test img {
150	width: 100%;
151}	
152
153}
154