検索機能で入れ子ループの二回目だけで処理したい

前提・実現したいこと

JavaScriptで検索機能をつくっており、検索結果のリンク先がすべて同じになってしまう悩みを解決したいです。 // 一応解決

追記
ループを入れ子にしたところ目的は達成したのですが、二回目のループ内で二回目のループのみ実行したい処理があります。一回目のループをオフにするにはどうすればいいでしょうか。

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

エラーはなく、検索機能は動きますが、リンクが同じになってしまいます。　// 解決
以下追記

該当のソースコード

js
1document.addEventListener('DOMContentLoaded', function () {
2  let $search = document.querySelector('#search-text'),
3    $sect = document.querySelectorAll('.target-area section');
4  searchWord = function (e) {
5    e.preventDefault();
6    let searchText = $search.value,
7      $searchList = document.querySelector('#search-result__list'),
8      $hitNum = document.querySelector('.search-result__hit-num');
9    let searchResult,
10      hitNum;
11    searchResult = [];
12    $searchList.textContent = '';
13    $hitNum.textContent = '';
14    if (searchText != '') {
15      data = document.querySelectorAll('.target-area p');
16      loopOne: for (let n = 0; n < data.length; n = (n + 1)) {
17        thisN = data[n];
18        thisN.setAttribute('id', 'id-' + (n + 1));
19        targetNum = thisN.id;
20        sectA = thisN.closest('section').querySelector('a');
21        sectTitle = sectA.textContent;
22        sectLink = sectA.href;
23        targetText = thisN.innerHTML;
24        if (targetText.indexOf(searchText) != -1) {
25          searchResult.push(targetText);
26        };
27
28        resultNum = searchResult.slice();
29        // console.log(resultNum);
30        loopTwo: for (let i = 0; i < searchResult.length; i = (i + 1)) {
31          // ここから
32          p = document.createElement('p');
33          $searchList.appendChild(p);
34          $p = $searchList.querySelector('p:nth-of-type(' + (i + 1) + ')');
35          a = document.createElement('a');
36          a.insertAdjacentHTML('afterbegin', resultNum[i]);
37          $p.appendChild(a);
38          a2 = document.createElement('a');
39          $p.appendChild(a2);
40          // ここまでを二回目のループのみで実行したい
41          a.href = '#' + targetNum;
42          a2.insertAdjacentHTML('afterbegin', '<span class="sect-title">' + sectTitle + '</span>');
43        };
44      }
45      hitNum = '<span class="marker1">Result：' + searchResult.length + ' titles</span>';
46      $hitNum.insertAdjacentHTML('beforeend', hitNum);
47    }
48  };
49  if ($search != null) {
50    let $input_submit = document.querySelector("input[name=btn_submit]");
51    $input_submit.addEventListener('click', searchWord);
52    $search.addEventListener('input', searchWord);
53  }
54});

html
1<div class="search-area">
2   <form class="search-form">
3     <input type="text" id="search-text" placeholder="keyword search">
4     <input name="btn_submit" type="submit" value="Input">
5   </form>
6   <div class="search-result">
7     <div class="search-result__hit-num"></div>
8     <div id="search-result__list"></div>
9   </div>
10</div>
11
12<div class="target-area">
13  <section>
14    <h3><a href="test.html"><span class="s_m">'21.10.04</span>　Sample1</a></h3>
15    <div class="short">
16       <p>The quick brown fox jumps over the lazy dog</p>
17       <p>The quick brown fox jumps over the lazy dog</p>
18       <p>The quick brown fox jumps over the lazy dog</p>
19       <p>The quick brown fox jumps over the lazy dog</p>
20       <p>The quick brown fox jumps over the lazy dog</p>
21    </div>
22  </section>
23  <section>
24    <h3><a href="test.html"><span class="s_m">'21.10.04</span>　Sample2</a></h3>
25    <div class="short">
26       <p>あのイーハトーヴォのすきとおった風</p>
27       <p>あのイーハトーヴォのすきとおった風</p>
28       <p>あのイーハトーヴォのすきとおった風</p>
29       <p>あのイーハトーヴォのすきとおった風</p>
30       <p>あのイーハトーヴォのすきとおった風</p>
31    </div>
32  </section>
33  <section>
34    <h3><a href="test.html"><span class="s_m">'21.10.04</span>　Sample3</a></h3>
35    <div class="short">
36       <p>The quick brown fox jumps over the lazy dog</p>
37       <p>The quick brown fox jumps over the lazy dog</p>
38       <p>The quick brown fox jumps over the lazy dog</p>
39       <p>The quick brown fox jumps over the lazy dog</p>
40       <p>The quick brown fox jumps over the lazy dog</p>
41    </div>
42  </section>
43  <section>
44    <h3><a href="test.html"><span class="s_m">'21.10.04</span>　Sample4</a></h3>
45    <div class="short">
46       <p>あのイーハトーヴォのすきとおった風</p>
47       <p>あのイーハトーヴォのすきとおった風</p>
48       <p>あのイーハトーヴォのすきとおった風</p>
49       <p>あのイーハトーヴォのすきとおった風</p>
50       <p>あのイーハトーヴォのすきとおった風</p>
51    </div>
52  </section>
53  <section class="last">
54    <h3><a href="test.html"><span class="s_m">'21.10.04</span>　Sample5</a></h3>
55    <div class="short">
56       <p>The quick brown fox jumps over the lazy dog</p>
57       <p>The quick brown fox jumps over the lazy dog</p>
58       <p>The quick brown fox jumps over the lazy dog</p>
59       <p>The quick brown fox jumps over the lazy dog</p>
60       <p>The quick brown fox jumps over the lazy dog</p>
61    </div>
62  </section>
63</div>

コメントアウトのconsoleでは、全てsection.lastのaが出力されました。コンソールには一件しか出力されなかったので、pの親要素のsectionの子要素aをそれぞれ取得することが出来ていないようでした。
.sect-title の中身も、すべてSample5となってしまいます。

また、「<span class="s_m">xxx</span>　」を出力結果から省くことはできますでしょうか。

追記

ループを広げてみたコードに修正したところ、目的は達成されました。
しかし、一回目のループ分pとaが作られてしまうのを制限したいです。ループの回数を制限するにはどうすればいいでしょうか。

試したこと

ループの外に

js
1sectA = thisN.closest('section').querySelector('a');
2      console.log(sectA); // これがすべて同じ（最後のsectionのaタグ）になってしまう
3      sectTitle = sectA.innerHTML;
4      sectLink = sectA.href;

これを出してみたのですが、結果は変わりませんでした。
何が問題で結果がすべて同じになってしまうのか、どうかご助力いただけないでしょうか。

ループの中に戻しました。

js
1for (let n = 0; n < data.length; n = (n + 1)) {
2        thisN = data[n];
3        thisN.setAttribute('id', 'id-' + (n + 1));
4        let sectS = thisN.closest('section'),
5          sectA = sectS.querySelector('a');
6        console.log(sectS); // （ループで数が多いが）これは取得できる　
7                            // sectAはすべて同じになる
8        sectTitle = sectA.innerHTML;
9        sectLink = sectA.href;
10        targetText = thisN.outerHTML;
11        if (targetText.indexOf(searchText) != -1) {
12          searchResult.push(targetText);
13        };
14      }