モーダルウィンドウを複数のボタンから表示したい

現状と実現したいこと

html
1#modal.hidden {
2  transform: translate(0, -10000px);
3}

hiddenでモーダルウィンドウを画面外に配置しました。
一つ目のボタンを押すと正しく画面内に表示されるのですが、二つ目のボタンでは反応しません。

二つ目のボタンは一つ目のhtmlをコピペしたものですのでテキスト以外に差異はありません。

class＝open部分クリックするとclass＝hiddenがremoveされてモーダルのtransformが無効になり画面内に表示されるようになっています。
ですが、二つ目のopen部分についてはクリックしてもhiddenがremoveされません。何故でしょうか？

また、表示されたウィンドウに押したボタン毎で異なる内容を表示したいのですが、方法がわかりませんでした。

分かる方がいらっしゃいましたら教えていただけると幸いです。

js
1
2"use strict";
3
4{
5  const open = document.getElementById("open");
6  const close = document.getElementById("close");
7  const modal = document.getElementById("modal");
8  const mask = document.getElementById("mask");
9
10  open.title = "記事";
11
12  open.addEventListener("click", () => {
13    modal.classList.remove("hidden");
14    mask.classList.remove("hidden");
15  });
16  close.addEventListener("click", () => {
17    modal.classList.add("hidden");
18    mask.classList.add("hidden");
19  });
20  mask.addEventListener("click", () => {
21    close.click();
22  });
23}
24

html
1
2    <link rel="stylesheet" href="css/check.css" />
3  </head>
4  <body>
5    <div class="wrapper">
6      
7      <main>
8        <section class="blog">
9          <article class="blogArticle">
10          <div id="mask" class="hidden"></div>
11            <section id="modal" class="hidden">
12              <h2 class="modalh2">
13                記事のタイトル
14              </h2>
15              <p class="assistanceText">
16                -------------------
17              </p>
18              <div class="scroll">
19                <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p>
20              </div>
21              <div id="close">閉じる</div>
22            </section>
23            <div class="blogText" id="open">
24              <h3>
25                記事のタイトル
26              </h3>
27              <p class="assistanceText">
28                -------------------
29              </p>
30              <p class="assistanceText">
31                一部本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文...
32              </p>
33            </div>
34          </article>
35        </section>
36        <section class="blog">
37          <article class="blogArticle">
38          <div id="mask" class="hidden"></div>
39            <section id="modal" class="hidden">
40              <h2 class="modalh2">
41                記事のタイトル
42              </h2>
43              <p class="assistanceText">
44                -------------------
45              </p>
46              <div class="scroll">
47                <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p>
48              </div>
49              <div id="close">閉じる</div>
50            </section>
51            <div class="blogText" id="open">
52              <h3>
53                記事のタイトル
54              </h3>
55              <p class="assistanceText">
56                -------------------
57              </p>
58              <p class="assistanceText">
59                一部本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文...
60              </p>
61            </div>
62          </article>
63        </section>
64      </main>
65    </div>
66    <script src="js/check.js"></script>
67  </body>
68</html>
69

css
1.blogText {
2  border: solid;
3  margin: 20px;
4}
5.modalh2 {
6  margin: 0;
7}
8.scroll {
9  height: 90vh;
10  overflow: scroll;
11}
12#open {
13  cursor: pointer;
14  padding: 3px;
15}
16
17#close {
18  cursor: pointer;
19  width: 200px;
20  border: 1px solid #ccc;
21  border-radius: 4px;
22  text-align: center;
23  padding: 12px 0;
24  margin: 16px auto 0;
25}
26
27#mask {
28  background: rgba(0, 0, 0, 0.4);
29  position: fixed;
30  top: 0;
31  bottom: 0;
32  right: 0;
33  left: 0;
34  z-index: 1;
35}
36
37#modal {
38  background: #fff;
39  width: 65%;
40  padding: 40px;
41  border-radius: 4px;
42  position: absolute;
43  top: 50px;
44  left: 0;
45  right: 0;
46  margin: 0 auto;
47  /* transition: transform 0.4s; */
48  z-index: 2;
49}
50
51#modal > p {
52  margin: 0 0 20px;
53}
54
55#mask.hidden {
56  display: none;
57}
58
59#modal.hidden {
60  transform: translate(0, -10000px);
61}
62