按字母顺序排序表的名称值

Question

目前我正在尝试按字母顺序对表格的输入名称值进行排序。首先我将数值推入数组，然后对数组进行排序，但我不能在输入区域中分离出这些值，希望你能帮我找到解决这个问题的方法

alphabeitcally排序函数写在我的代码的底部

$(function(){
    var tableHead =
        "<table>" +
            "<tr>" +
                "<th class='sort'>Id <span class='downArrow'>&darr;</span>&nbsp;&nbsp;<span class='upArrow'>&uarr;</span></th>" +
                "<th id='sort_name'>Name sort</th>" +
                "<th>Surname</th>" +
                "<th>Birthday</th>" +
                "<th>Filter</th>" +
                "<th class='addList'>+</th>" +
            "</tr>" +
        "</table>";

    $('body').html(tableHead);

    var inputName = "<input type='text' class='name' placeholder='First name'>";
    var inputSurname = "<input type='text' class='surname' placeholder='Surname'>";
    var bDayDate ="<input type='date' class='bDayDate' placeholder='Bday'>";
    var addList = $('.addList');
    var downArrow = $(".downArrow");
    var upArrow = $(".upArrow");
    var name = $(".name");

    var idNum = 0;
    var arrNum = [];
    var nameArr = [];
    var sortedNameArr = [];
    var sortedArr = [];

    addList.on("click", function(){
        idNum++;

       var tr = $("<tr></tr>");
        for(var i = 1; i <= 6; i++){
            var td = $('<td></td>');
            tr.addClass(""+ idNum);
            switch (i){
                case 1:
                    td.addClass(""+ idNum);
                    td.html(idNum);
                break;
                case 2: td.html(inputName);
                break;
                case 3: td.html(inputSurname);
                break;
                case 4: td.html(bDayDate);
                break;
                case 5: td.html(1);
                break;
                case 6:
                    td.html("Delete");
                    td.addClass('delete');
                break;
                default:
                    return console.log("OooPs!!");
            }
            tr.append(td);
        }


        arrNum.push(tr);
        $('table').append(arrNum);




        $('.delete').on("click", function(){
            removeItem(this, arrNum, sortedArr);
        });

        for(var j = arrNum.length; j >= 0; j--){
            sortedArr.push(arrNum[j]);
        }

        downArrow.on("click", function(){
            $('table').append(sortedArr);
            $('.delete').on("click", function(){
                $(this).parent().remove();
            });
        });

        upArrow.on("click", function(){
           $('table').append(arrNum);
        });



        function removeItem(item, arr, sArr) {
            var that = $(item).parent();
            $(item).parent().remove();

            for(var k = 0;k <arr.length; k++) {
                if(arr[k] && that[0] === arr[k][0]) {
                     arr.splice(k,1);
                } else {
                    // console.log(that[0]);
                    // console.log(arr[k][0])
                }
            }

            // If you want delete when sort the table
            for(var k = 0;k <sArr.length; k++) {
                if(sArr[k] && that[0] === sArr[k][0]) {
                    sArr.splice(k,1);
                } else {
                    // console.log("wrong!!")
                }
            }
        }
    });

    $("#sort_name").on("click", function(){
        var name = $(".name");
        for(var n = 0; n < arrNum.length; n++){
            nameArr.push($(name[n]).val());
        }
        nameArr.sort();
        for(var n = 0; n < nameArr.length;n++){
            console.log(nameArr[n])
        }

    });


});