JSにてリストを上から順に状態を「完了」にしていくロジックを組みたいです。

実現したいこと

上から３つのボックスを順に並べており、以下状態を表しています。

◆グレーアウト・・・完了
◆青枠・・・確認中
◆グレー枠・・・待機

現状テスト２の「こちら」（テスト１の「こちら」リンクは特に意味なし）のリンクをクリックするとクリックした対象のボックスは完了済＋グレーアウトし、次確認事項の直下のボックス（テスト３）が青枠で囲って選択されているようなスタイルになるようにしています。

jsの知識が浅く、classList()を使用してスタイルを切り替えているのですが、理想としては上から順に完了にしないと進めないようにしたいです。

※現状真ん中が未完了のまま３つ目を完了にできる状態ですので、上から順に完了にすることを条件で作成したいと考えています。

分かる方いらっしゃいましたらお力添えを頂きたいです。

以上、よろしくお願い致します。

該当のソースコード

html
1<div id="test1" class="gray">
2    <div>
3      <div class="main">
4        <ul class="center">
5          <h1 class="inner_ttl">テスト１</h1>
6          <a href="#" class="link_txt" value="a">こちら</a>
7        </ul>
8      </div>
9      <p class="txt">完了</p>
10    </div>
11  </div>
12  <div id="test2" class="blue">
13    <div>
14      <div class="main">
15        <ul class="center">
16          <h1 class="inner_ttl">テスト２</h1>
17          <a href="#" class="link_txt" value="b" onclick="cl1()">こちら</a>
18        </ul>
19      </div>
20      <p class="txt">確認中</p>
21    </div>
22  </div>
23  <div id="dsp1" class="blue" style="display: none; border: none; background-color: gray;">
24    <div>
25      <div class="main">
26        <ul class="center">
27          <h1 class="inner_ttl">テスト2</h1>
28        </ul>
29      </div>
30      <p class="txt">完了</p>
31    </div>
32  </div>
33  <div id="test3" class="red">
34    <div>
35      <div class="main">
36        <ul class="center">
37          <h1 class="inner_ttl">テスト３</h1>
38          <a href="#" class="link_txt" value="c" onclick="cl2()">こちら</a>
39        </ul>
40      </div>
41      <p class="txt">待機</p>
42    </div>
43  </div>
44  <div id="dsp2" class="red" style="display: none; background-color: gray;">
45    <div>
46      <div class="main">
47        <ul class="center">
48          <h1 class="inner_ttl">テスト３</h1>
49        </ul>
50      </div>
51      <p class="txt">完了</p>
52    </div>
53  </div>

css
1.gray{
2    border-radius: 5px;
3    background-color: gray;
4    padding: 20px 25px;
5    margin: 30px;
6}
7
8.blue{
9    border-radius: 5px;
10    background-color: #fff;
11    padding: 20px 25px;
12    border: 2px solid blue;
13    margin:20px 0px;
14    margin: 30px;
15}
16
17.red{
18    border-radius: 5px;
19    background-color: #fff;
20    padding: 20px 25px;
21    border: 2px solid #eee;
22    margin: 30px;
23}
24
25.txt{
26    font-size: 16px;
27}
28
29.main{
30    display: flex;
31}
32
33.center{
34    width: 100%;
35    display: flex;
36    justify-content: space-between;
37    align-items: center;
38}
39
40.inner_ttl{
41    font-size: 14px;
42}
43
44.link_txt{
45    color: black;
46    cursor: pointer;
47}
48
49.none{
50    display: none;
51}
52
53.dsp1{
54    display: block!important;
55}
56
57.dsp2{
58    display: block!important;
59}
60
61.blue{
62    border: 2px solid blue;
63}

js
1function cl1() {
2    let test2 = document.getElementById("test2");
3    let test3 = document.getElementById("test3");
4    let dsp1 = document.getElementById("dsp1");
5
6    test2.classList.add('none');
7    test3.classList.add('blue');
8    dsp1.classList.add('dsp1');
9}
10
11function cl2() {
12    let test3 = document.getElementById("test3");
13    let dsp2 = document.getElementById("dsp2");
14
15    test3.classList.add('none');
16    dsp2.classList.add('dsp2');
17}