同じページで「タブ切り替え」かつ「モーダルウィンドウ（画像をギャラリー仕様）」できるページを作りたい

前提

javascriptおよびwebサイト作成を現在勉強中です。

ご教授いただきたく投稿させていただきました。
何卒よろしくお願いいたします。

実現したいこと

同じページで、「タブ切り替え」かつ「モーダルウィンドウ（画像をギャラリー仕様）」できるページを作りたいです。
※該当のhtmlと異なる部分があります

発生している問題・エラーメッセージ

1つ目のボックスだけの時はクリックできていたのですが、
タブ切り替えにするため2つ目3つ目をコピーして作ったらクリックが発動せず、
モーダルウィンドウがbuttonを押しても全て開かなくなってしまいました。

該当のソースコード

html（1000文字以内に収めるため省略しています）
1<div class="wrap">
2	
3<input id="all" type="radio" name="-e-work--tab_item" checked>
4<label class="-e-work--tab_item -e-work--tab_item_back01" for="all"><img src="../assets/tab1.png" alt=""></label>
5<input id="programming" type="radio" name="-e-work--tab_item">
6<label class="-e-work--tab_item -e-work--tab_item_back02" for="programming"><img src="../assets/tab2.png" alt=""></label>
7<input id="design" type="radio" name="-e-work--tab_item">
8<label class="-e-work--tab_item -e-work--tab_item_back03" for="design"><img src="../assets/tab3.png" alt=""></label>	
9	
10<article class="tab_content" id="all_content">
11<div class="tab_content_description">
12<div class="c-txtsp">
13				
14<div class="-e-work--list">
15<div class="-e-work--itemlist-oll">
16
17<div class="-e-work--itemlist">
18<div class="-e-work--itemlist-title"><p class="-work-explanation">ギャラリー1-1</p></div>
19<div class="-e-work--itemlist-items">
20<button class="-s-work--items" data-modal="1"><img src="../assets/photo01-small.jpg" alt=""></button>
21<button class="-s-work--items" data-modal="2"><img src="../assets/photo02-small.jpg" alt=""></button>
22<button class="-s-work--items" data-modal="3"><img src="../assets/photo03-small.jpg" alt=""></button>
23<button class="-s-work--items" data-modal="4"><img src="../assets/photo04-small.jpg" alt=""></button>
24</div>	
25<div class="-e-work--itemlist">
26<div class="-e-work--itemlist-title"><p class="-work-explanation">ギャラリー-1-2</p></div>
27<div class="-e-work--itemlist-items">
28<button class="-s-work--items" data-modal="1"><img src="../assets/photo11-small.jpg" alt=""></button>
29<button class="-s-work--items" data-modal="2"><img src="../assets/photo12-small.jpg" alt=""></button>
30<button class="-s-work--items" data-modal="3"><img src="../assets/photo13-small.jpg" alt=""></button>
31<button class="-s-work--items" data-modal="4"><img src="../assets/photo14-small.jpg" alt=""></button>
32<button class="-s-work--items" data-modal="5"><img src="../assets/photo15-small.jpg" alt=""></button>
33<button class="-s-work--items" data-modal="6"><img src="../assets/photo16-small.jpg" alt=""></button>
34<button class="-s-work--items" data-modal="7"><img src="../assets/photo17-small.jpg" alt=""></button>
35</div>
36</div>	
37
38</div>
39						
40
41<!-- モーダル -->
42<div class="modal" id="modal1">
43<div class="modal__overlay modalClose"></div>
44<div class="modal__content">
45<div class="modal_inner">
46<div class="modal__close-btn modalClose" aria-label="閉じる"><span class="lineClose"></span></div>
47
48<!-- スライダー -->
49<div class="swiper modalInSlider -e-work--gallery1">
50<div class="swiper-wrapper">
51<div class="swiper-slide modalInSlider swiper-slide-width">
52<div class="swiperText swiperimg">
53<figure class="-e-work--item-popup -e-work--item-popup--height">
54<img src="../assets/photo01-large.jpg" alt="" class="swiper-items swiper-items--height">
55</figure>
56</div>
57<div class="e-work--item-cap">キャプション／フォト1</div>
58</div>
59<div class="swiper-slide modalInSlider swiper-slide-width">
60<div class="swiperText swiperimg">
61<figure class="-e-work--item-popup -e-work--item-popup--height">
62<img src="../assets/photo02-large.jpg" alt="" class="swiper-items swiper-items--height">
63</figure>
64</div>
65<div class="e-work--item-cap">キャプション／フォト2</div>
66</div>
67<div class="swiper-slide modalInSlider swiper-slide-width">
68<div class="swiperText swiperimg">
69<figure class="-e-work--item-popup -e-work--item-popup--width">
70<img src="../assets/photo03-large.jpg" alt="" class="swiper-items swiper-items--width">
71</figure>
72</div>
73<div class="e-work--item-cap">キャプション／フォト3</div>
74</div>
75<div class="swiper-slide modalInSlider swiper-slide-width">
76<div class="swiperText swiperimg">
77<figure class="-e-work--item-popup -e-work--item-popup--height">
78<img src="../assets/photo04-large.jpg" alt="" class="swiper-items swiper-items--height">
79</figure>
80</div>
81<div class="e-work--item-cap">キャプション／フォト4</div>
82</div>
83
84<div class="swiper-slide modalInSlider swiper-slide-width">
85<div class="swiperText swiperimg">
86<figure class="-e-work--item-popup -e-work--item-popup--superwidth">
87<img src="../assets/photo11-large.jpg" alt="" class="swiper-items swiper-items--height">
88<figcaption class="e-work--item-cap">キャプション／フォト11</figcaption>
89</figure>
90</div>
91</div>
92<div class="swiper-slide modalInSlider swiper-slide-width">
93<div class="swiperText swiperimg">
94<figure class="-e-work--item-popup -e-work--item-popup--superwidth">
95<img src="../assets/nagata-1-1200.png" alt="" class="swiper-items swiper-items--width">
96<figcaption class="e-work--item-cap">キャプション／フォト12</figcaption>
97</figure>
98</div>
99</div>
100<div class="swiper-slide modalInSlider swiper-slide-width">
101<div class="swiperText swiperimg">
102<figure class="-e-work--item-popup -e-work--item-popup--superwidth">
103<img src="../assets/nagata-5-01-1200.png" alt="" class="swiper-items swiper-items--width">
104<figcaption class="e-work--item-cap">キャプション／フォト13</figcaption>
105</figure>
106</div>
107</div>
108<div class="swiper-slide modalInSlider swiper-slide-width">
109<div class="swiperText swiperimg">
110<figure class="-e-work--item-popup -e-work--item-popup--superwidth">
111<img src="../assets/nagata-7-02-1200.png" alt="" class="swiper-items swiper-items--height">
112<figcaption class="e-work--item-cap">キャプション／フォト14</figcaption>
113</figure>
114</div>
115</div>
116<div class="swiper-slide modalInSlider swiper-slide-width">
117<div class="swiperText swiperimg">
118<figure class="-e-work--item-popup -e-work--item-popup--superwidth">
119<img src="../assets/jinsei-57-01-1000.png" alt="" class="swiper-items swiper-items--height">
120<figcaption class="e-work--item-cap">キャプション／フォト15</figcaption>
121</figure>
122</div>
123</div>
124<div class="swiper-slide modalInSlider swiper-slide-width">
125<div class="swiperText swiperimg">
126<figure class="-e-work--item-popup -e-work--item-popup--superwidth">
127<img src="../assets/jinsei-17-1000.png" alt="" class="swiper-items swiper-items--width">
128<figcaption class="e-work--item-cap">キャプション／フォト16</figcaption>
129</figure>
130</div>
131</div>
132
133</div>
134</div>
135</div>
136</div>
137
138</div>
139<div class="swiper-button-prev"></div>
140<div class="swiper-button-next"></div>
141</div>
142</div>
143
144
145</div>				
146
147
148</div><!---e-work--list-->
149	
150</div>
151</div>
152</article>
153	
154	
155<!--タブ切り替え2つ目の内容	-->
156<article class="tab_content" id="programming_content">
157タブ切り替え1・3と同じように内容が入ります
158</article>
159	
160	
161<!--タブ切り替え3つ目の内容	-->	
162<article class="tab_content" id="design_content">
163タブ切り替え1・2と同じように内容が入ります
164</article>
165
166	
167	
168	
169</div><!--	wrap-->
170

JavaScript
1window.addEventListener("DOMContentLoaded", () => {
2  // モーダルを取得
3  const modal = document.getElementById("modal");
4  // モーダルを開く
5  const openModalBtns = document.querySelectorAll(".modalOpen");
6  // モーダルを閉じる
7  const closeModalBtns = document.querySelectorAll(".modalClose");
8
9  // Swiperの設定
10  const swiper = new Swiper(".swiper", {
11    loop: true,
12    navigation: {
13      nextEl: ".swiper-button-next",
14      prevEl: ".swiper-button-prev",
15    },
16    spaceBetween: 30, //任意のマージン
17  });
18
19  // モーダルのボタンクリック
20  openModalBtns.forEach((openModalBtn) => {
21    openModalBtn.addEventListener("click", () => {
22      // data-modalで設定したスライド番号を取得
23      const modalIndex = openModalBtn.getAttribute('data-modal');
24      swiper.slideTo(modalIndex);
25      modal.classList.add("is-active");
26    });
27  });
28
29  // モーダルの閉じるボタンクリック
30  closeModalBtns.forEach((closeModalBtn) => {
31    closeModalBtn.addEventListener("click", () => {
32      modal.classList.remove("is-active");
33    });
34  });
35});