Laravelでの非同期処理:Json形式で渡ってきた値をループさせてhtmlに差し替えたいです。

前提・実現したいこと

Laravelで投稿順序を変える非同期処理を実装しております。
特定のアクションをview側で行った時にajaxが発火,Controllerに値を渡してjson形式で
jsファイルにレスポンスをされ、特定のHTMLに渡ってきた値をループ処理で
挿入して差し替えたいです。
現状、json形式で値の取得はできております。

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

現状のコードですと差し替えが一件しか行われずにいます。

該当のソースコード

index.blade.php
1                  <div class="example">
2                    <table class="table">
3                      <thead>
4                        <tr>
5                          <th scope="col"></th>
6                          <th scope="col">タイトル</th>
7                          <th scope="col">作成日時</th>
8                          <th scope="col">詳細</th>
9                        </tr>
10                      </thead>
11                      <tbody>
12                        @foreach($posts as $post)
13                        <tr>
14                          <th scope="row"></th>
15                          <td>{{ $post->title }}</td>
16                          <td>{{ $post->created_at }}</td>
17                          <td><a href="{{ route('post.show', ['id' => $post->id]) }}">詳細をみる</a></td>
18                        </tr>
19                        @endforeach
20                      </tbody>
21                    </table>
22                  </div>
23                  {{ $posts->links() }}
24                </div>

sort.js
1function sortChange() {
2  let obj = document.getElementById('sort');
3  let index = obj.selectedIndex;
4  let value = sort.options[index].value;
5
6  $.ajax({
7    type:"GET",
8    url:"ajax",　
9    data:{"value":value},
10    dataType:"json" 
11  }).done(function(res){
12    let data = res.data
13
14    //非同期通信に成功したときに行いたい処理
15      $(".example").html("");
16      var html = `
17      <div id="example">
18        <table class="table">
19          <thead>
20            <tr>
21              <th scope="col"></th>
22              <th scope="col">タイトル</th>
23              <th scope="col">作成日時</th>
24              <th scope="col">詳細</th>
25            </tr>
26          </thead>
27          <tbody id="table-body">
28`;
29$.each(data, function(index, el){
30  console.log('渡ってきた値の要素')
31  console.log(el.title);
32  html2 = `
33  <tr>
34    <th scope="row"></th>
35    <td>${ el.title }</td>
36    <td>${ el.created_at }</td>
37    <td><a href="">詳細をみる</a></td>
38  </tr>
39`;
40});
41
42      var html3 = `
43          </tbody>
44        </table>
45      </div>
46      `;
47
48    html = html + html2;
49    html = html + html3;
50
51      $(".example").append(html);
52
53  }).fail(function(){
54    //失敗した時の処理
55    alert('非同期に失敗しました');
56  });
57}

試したこと

Eachだけではなくfor文とかで試しても同じような結果になってしまいます。

sort.js
1     for (var i = 0; i < data.length; i++) {
2       var html2 = `
3       <tr>
4         <th scope="row"></th>
5         <td id="title">${ data[i].title }</td>
6         <td id="created">${ data[i].created_at }</td>
7         <td id="link"><a href="">詳細をみる</a></td>
8       </tr>
9 `;
10     }