jqueryで作成したモーダルが複数表示されてしまうバグについて

やりたいこと
プラグインを使わずにjqueryで、複数のモーダル使用したい。

現状の状況
１画面で複数モーダルが表示されるようにしたいので、クリックされた(this)要素のdata(‘id’)を取得してどのモーダルを表示させるのか指定しています。
「modal1」は正常に動くものの、「modal2」が表示されず、「modal2」をクリックした後に「modal1」をクリックするとモーダルが2つ表示されてしまう状態です。
書き方を何度も変えてみたのですがうまくいかず、解決方法をご教示頂けますと幸いです。
※URLや画像名は、わからないようにしています。

html
1<main>
2        <div class="container">
3            <a href="" class="js_modal_open" data-id="modal1">
4                <img src="image1" alt="image1">
5            </a>
6            <a href="" class="js_modal_open" data-id="modal2">
7                <img src="image2" alt="image2">
8            </a>
9        </div>
10        <!-- modai1 start -->
11        <div class="modal js_modal" id="modal1">
12            <div class="modal_bg js_modal_close"></div>
13            <div class="modal_content">
14                <a class="js_modal_close" id="close_button" href="">×</a>
15                <div class="modal_text_content">
16                    <p class="talent_name">TEXTTEXT</p>
17                    <p class="talent_name_en">TEXTTEXT</p>
18                    <p class="born_story">TEXTTEXTTEXTTEXT</p>
19                    <div class="sns_icon_content">
20                        <div>
21                            <a href="url"><img src="./image/Twitter_blue.png" alt="Twittter_icon" class="sns_icon" id="twitter_icon"></a>
22                        </div>
23                        <div>
24                            <a href="url"><img src="./image/YoutubeIcon.png" alt="YoutubeIcon" class="sns_icon" id="youtube_icon"></a>
25                        </div>
26                        <div>
27                            <a href="url"><img src="./image/CartIcon.png" alt="CartIcon" class="sns_icon" id="cart_icon"></a>
28                        </div>
29                    </div>
30                </div>
31            <div>
32        </div>
33        <!-- modai1 end -->
34        <!-- modai2 start -->
35        <div class="modal js_modal" id="modal2">
36            <div class="modal_bg js_modal_close"></div>
37            <div class="modal_content">
38                <a class="js_modal_close" id="close_button" href="">×</a>
39                <div class="modal_text_content">
40                    <p class="talent_name">TEXTTEXT</p>
41                    <p class="talent_name_en">TEXTTEXT</p>
42                    <p class="born_story">TEXTTEXTTEXTTEXTTEXTTEXT</p>
43                    <div class="sns_icon_content">
44                        <div>
45                            <a href="url"><img src="./image/Twitter_blue.png" alt="Twittter_icon" class="sns_icon" id="twitter_icon"></a>
46                        </div>
47                        <div>
48                            <a href="url"><img src="./image/YoutubeIcon.png" alt="YoutubeIcon" class="sns_icon" id="youtube_icon"></a>
49                        </div>
50                        <div>
51                            <a href="url"><img src="./image/CartIcon.png" alt="CartIcon" class="sns_icon" id="cart_icon"></a>
52                        </div>
53                    </div>
54                </div>
55            <div>
56        </div>
57        <!-- modai2 end -->
58    </main>

css
1*{
2    box-sizing: border-box;
3    margin: 0;
4    padding: 0;
5}
6.modal{
7    display: none;
8    height: 100vh;
9    position: fixed;
10    top: 0;
11    width: 100%;
12}
13.modal_bg{
14    background: rgba(0,0,0,0.8);
15    height: 100vh;
16    position: absolute;
17    width: 100%;
18}
19.modal_content {
20    background-image: url(../image/popup);
21    background-size: contain;
22    background-repeat: no-repeat;
23    padding: 40px;
24    position: absolute;
25    top: 50%;
26    left: 50%;
27    transform: translate(-50%,-50%);
28    width: 900px;
29    height: 506.25px;
30}
31.talent_name {
32    font-size: 30px;
33    font-weight: bold;
34    color: #292929;
35    position: absolute;
36    top: 34%;
37    left: 45%;
38}
39.talent_name_en {
40    font-size: 14px;
41    font-family: 'Roboto','sans-serif';
42    color: #8E8E8E;
43    position: absolute;
44    top: 40%;
45    left: 45%;
46    margin-top: 10px;
47    margin-left: 4px;
48}
49.born_story {
50    font-size: 16px;
51    color: #292929;
52    position: absolute;
53    width: 420px;
54    top: 48%;
55    left: 45%
56}
57.sns_icon_content {
58    width: 420px;
59    display: flex;
60    justify-content: flex-start;
61    position: absolute;
62    top: 75%;
63    left: 45%;
64}
65.sns_icon {
66    width: 50px;
67    height: 50px;
68}
69#twitter_icon {
70    margin: 20px 5px 0 0;
71}
72#youtube_icon {
73    margin: 20px 5px 0 5px;
74}
75#cart_icon {
76    margin: 20px 0 0 5px;
77}
78#close_button {
79    text-decoration: none;
80    font-size: 50px;
81    position: absolute;
82    top: -75px;
83    right: -40px;
84    color: #fff;
85}

js
1$(function () {
2    $('.js-modal-open').click(function () {
3        var id = $(this).data('id'); 
4        $('.js-modal[data-id="modal' + id + '"]').fadeIn();
5        return false;
6    });
7    $('.js-modal-close').click(function () {
8        $('.js-modal').fadeOut();
9        return false;
10    });
11});