viewer.js 複数箇所の表示方法

下記のようにviewer.jsを使って2枚の画像の拡大表示をしています。
それぞれ異なる場所でviewer.jsを適用させたいです。
以下のままですと一枚目のa.jpgのみ拡大表示されて、二枚目のb.jpgが反応しません。
id="zoomImg2"にも適用させたいのですがJavascriptが分からずお手上げ状態です。
対処法を教えて頂けると幸いです。

html
1                    <ul class="viewer-imgs" id="zoomImg">
2                      <li>
3                        <img
4                          src="a.jpg"
5                          class="img-fluid viewer-img00 img"
6                          
7                          alt=""
8                        />
9                      </li>
10                    </ul>
11　　　　　　　　　　　　<p class="h6">テキストテキスト</p>
12                    <ul class="viewer-imgs" id="zoomImg2">
13                      <li>
14                        <img
15                          src="b.jpg"
16                          class="img-fluid viewer-img00 img"
17                          
18                          alt=""
19                        />
20                      </li>
21                    </ul>

JS
1<script>
2  const gallery = new Viewer(document.getElementById("zoomImg"),  {
3    navbar: true,
4    title: false,
5    zIndex: 1000,
6    toolbar: {
7      zoomIn: 1,
8      zoomOut: 1,
9      oneToOne: 1,
10      reset: 1,
11      prev: 1,
12      play: {
13        show: 0,
14        size: "large",
15      },
16      next: 1,
17      rotateLeft: 0,
18      rotateRight: 0,
19      flipHorizontal: 0,
20      flipVertical: 0,
21    },
22  });
23</script>