[Javascript]同じ作りのモーダルを複数設置し、背景を固定した時にTOPに戻るのを回避したい

######【概要】
jqueryが使えない環境でJavascriptにてモーダルの設置を行っていて、モーダルが1個であれば問題なく設置できたのですが
同じ作り(コンテンツの中身は違う)のモーダルを動的に複数設置するといった場合に、ID等を自動的に連番で付与して設置していく方法がわからずに困っています。
また、モーダルが表示された時に背景になる要素を固定してスクロールしないようにしたいのですが、モーダルが表示された際に固定はされるものの背景の要素がページのTOPまで戻ってしまいます。

######【実現できたこと】

モーダルの設置(1つ目)
背景要素の固定

######【追加で実現したいこと】

2つ目以降のモーダルの設置(ID等の自動付与)
固定した背景がTOPに戻らずにその場で固定される

参考サイトを探したものの、jqueryであれば多少は分かるのですが生のJavascriptはまだ勉強不足で応用できるのかどうかもわかりませんでした。
なにかいい解決策をご教示いただけますでしょうか。何卒よろしくお願いいたします。

HTML
1<body>
2  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
3  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
4  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
5  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
6  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
7  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
8
9  <button type="button" id="openModal">モーダルを開く</button>
10
11  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
12  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
13  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
14  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
15  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
16  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
17  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
18  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
19  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
20  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
21  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
22  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
23  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
24  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
25  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
26  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
27  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
28  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
29  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
30  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
31  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
32  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
33
34  <section class="modalArea" id="modalArea">
35    <div id="modalBg" class="modalBg"></div>
36    <div class="modalWrapper">
37      <div class="modalContents">
38        モーダルの中身
39      </div>
40      <div id="closeModal" class="closeModal">×</div>
41    </div>
42  </section>
43</body>

CSS
1      body.fixed {
2        position: fixed;
3        width: 100%;
4        height: 100%;
5        left: 0;
6      }
7      .modalArea {
8        visibility: hidden;
9        opacity : 0;
10        position: fixed;
11        z-index: 10;
12        top: 0;
13        left: 0;
14        width: 100%;
15        height: 100%;
16        transition: .4s;
17      }
18      .modalBg {
19        width: 100%;
20        height: 100%;
21        background-color: rgba(30,30,30,0.6);
22      }
23      .modalWrapper {
24        padding: 40px;
25        width: 884px;
26        background: #fff;
27        border: 1px solid #E3E3E3;
28        border-radius: 6px;
29        position: absolute;
30        top: 50%;
31        left: 50%;
32        transform:translate(-50%,-50%);
33      }
34      .closeModal {
35        position: absolute;
36        top: 0.5rem;
37        right: 1rem;
38        cursor: pointer;
39      }
40      .modalArea.is-show {
41        visibility: visible;
42        opacity : 1;
43      }

Javascript
1  (function () {
2  const modalArea = document.getElementById('modalArea');
3  const openModal = document.getElementById('openModal');
4  const closeModal = document.getElementById('closeModal');
5  const modalBg = document.getElementById('modalBg');
6  const toggle = [openModal,closeModal,modalBg];
7
8  for(let i=0, len=toggle.length ; i<len ; i++){
9    toggle[i].addEventListener('click',function(){
10      modalArea.classList.toggle('is-show');
11      let elements = document.getElementsByTagName("body");
12      elements[0].classList.toggle("fixed");
13    },false);
14  }
15}());