在数组中，如何以我希望打印的方式打印值而不是最后一个值

我正在使用for-loop来获取使用.html()排序列表的值，但它只打印数组中的最后一个值。我认为通过在循环中使用myArray.length和myArray[i]，它会按预期循环。

理想情况下，我希望这样读：

排序后的值为：1、2、3、4、5 等。.

我做错了什么？

在这里摆弄。

.HTML：

<div id="wrapper">
    <div id="content">
        <h1>Let's Do Some Math</h1>
        <div id="intake">
        <input type="text" id="input"> <button id="inTakeButton">Push to Array</button> <button id="showArray">Show Array</button> <button id="doMath">Do Math</button>
        </div>
        <div id="middle">
            <ul id="list">
            </ul>
    </div>
        <div id="output">
            <p id="sorted"></p>
            <p id="sum"></p>
            <p id="average"></p>
        </div>
    </div>
</div>

.CSS：

#wrapper{
    width: 80%;
    margin: 0 auto;
    border: 1px solid black;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 5px 5px 10px 3px black;
    padding: 10px;
}
h1 {
    text-align: center;
    color: orange;
    text-shadow: 1px 1px blue;
}
#intake {
    text-align: center;
}

JavaScript：

myArray = [];
var theTotal;
$(document).ready(function() {
    $('#inTakeButton').on('click', function() {
        var inputValue = parseFloat($('#input').val());
        if (inputValue === "") {
            return;
        }
        if (isNaN(inputValue)) {
            $('#input').val("");
            return;
        }
        myArray.push(inputValue);
        $('#input').val("");
    });
    $('#showArray').on('click', function() {
        console.log(myArray);
        $('#list').html("");
        for (var i = 0; i < myArray.length; i++) {
            $('#list').append("<li>" + myArray[i] + "</ul>");
        };
        $('#doMath').on('click', function() {
            theTotal = 0;
            for (var i = 0; i < myArray.length; i++) {
              theTotal = theTotal + myArray[i];  
            };
            $('#sum').html("");
            $('#sum').html("The sum is: " + theTotal);
            var average = (theTotal/myArray.length);
            $('#average').html("");
            $('#average').html("The mean value is: " + average);
            var sorted = myArray.sort();
            $('#sorted').html("");
            for (var i = 0; i < myArray.length; i++) {
             $('#sorted').html("The sorted values are: <br>" + myArray[i] + ", ");   
            };
        });
    });
});