jqueryで、ajaxで取ってきた値の表示がうまくいかない

Question

Laravel+JQueryで、ボタンをクリックするとAjaxでGETリクエストをコントローラーに送り、jsonで返ってきた値をhtml上に表示する、ということを実現したいです。
取ってきた連想配列をeachで回して値を取り出しているのですが、html上に表示する際に取り出した最後の１つの結果のみ表示されてしまいます。
想定としては、２つ結果を取り出したとしたら、２つ結果がhtmlに表示される想定でした。

$.eachの下のconsole.log(value.name)では、想定通りの値が取れています。

しかし、実際にhtml上に表示させてみると、取り出した最後の結果(test2)しか表示されませんでした。

ずっと原因がうまく掴めずで詰まっている状況です。
こちらの考えられる理由についてご教示いただけますと幸いです。

$("#bt").click(function () {
  $.ajax({
    type: "get", //HTTP通信の種類
    url: "/getuser",
    dataType: "json",
  })
    //通信が成功したとき
    .done((res) => {
      // console.log(res)
      $.each(res, function (index, value) {
        console.log(value.name)
        html = `
                      <tr class="user-list">
                          <td class="col-xs-2">ユーザー名：${value.name}</td>
                      </tr>
         `;
      });
      $(".user-table").append(html); //できあがったテンプレートをビューに追加
    })
    //通信が失敗したとき
    .fail((error) => {
      console.log(error.statusText);
    });
});

// コントローラー側

  public function getUser()
  {
    $users = User::select('name','email')->get();
    return $users;
  }

Answer 1

ループのそとでappendしてるからです。
ずっと上書きされ続けた結果だけ残ってます。
なかでappendしてください。

デバッグするのでしたら値そのものよりもappendする直前の変数htmlです。

Comments

[fork_]

迅速なご回答ありがとうございます。
ループの中に入れることによって解決できました！

[m.ts10806]

適切なデバッグをできているかどうかだと思います。関係する変数は全て確認するくらいでちょうど良いです。

[fork_]

m.ts10806様がおっしゃる、htmlをデバッグするというのは盲点でした...。
> 関係する変数は全て確認するくらい
こちら、意識していきます。　ありがとうございました。