JavaScriptで.valueを使っているのにvalueではなくHTMLタグが返ってくる

前提・実現したいこと

JavaScriptを学習中の初学者です。
JavaScript・jQueryで思うような値が返ってこないため、悩んでいます。

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

下記ソースコードの出力1と出力2が同様の結果を返すと考えましたが、以下のように異なる結果が出力されてしまいます。

出力1: テスト1
出力2: <input class="waypoint" type="text" name="waypoints[]">

jQueryのeachは、配列のすべての要素に対して同様の動作を行うものと認識していたため、出力1と出力2が同様の結果を返すと考えていました。
また、eachがどのようなものであれ、出力2でreturn waypoint.value;としているのにvalueではなくタグが出力されるのも理解できず困っています。

① なぜ出力１と出力2が異なる結果を返すのか？
② なぜ出力2でvalueではなくタグが返されるのか？

以上の2点について、ご教授いただきたいです。

該当のソースコード

html
1<form action="" method="">
2    <input class="waypoint" type="text" name="waypoints[]"></input>
3    <input class="waypoint" type="text" name="waypoints[]"></input>
4    <input class="waypoint" type="text" name="waypoints[]"></input>
5    <button type="button" class="btn-ajax">ボタン</button>
6</form>
7

それぞれのinputにはテスト1, テスト2, テスト3を入力

js
1$(function(){
2
3    $('.btn-ajax').on('click', function() {
4
5        var tests = $('.waypoint').each(function(index, waypoint){
6                        console.log(waypoint.value);  // 出力1
7                        return waypoint.value;
8                    });
9
10        console.log(tests[0]);  // 出力2
11
12    });
13});