Q:

jQuery list won't sort after append

$(document).ready(function() {

    $('#new-to-do-item').keyup(function(e) {
        if (e.which === 13) {
           var text = $(this).val();
           var listItem = "<li><input type='checkbox'>" + text + "</li>"
           $(listItem).appendTo('.list');
        }
     });

    //sort
    $(document).on('click', '#coolthings',function(){
        $(".list li").sort(asc_sort).appendTo('.list');
        //$("#debug").text("Output:");
        // accending sort
       function asc_sort(a, b){
           return ($(b).text()) < ($(a).text()) ? 1 : -1;    
       }
}); 

I have a list that initially consist of 4 items, and #coolthings is a  element that when i click, will sort those items in alphabetical order, however, the keyup function appends new items to the list, and the #coolthings button will not sort the WHOLE list along with the newly added items, it will sort the initial list alphabetically, followed by new items added alphabetically, making the entire list consisted of two alphabetical lists.
I wonder how can i make it so the sort button will sort the ENTIRE list in alphabetical order after i added the new items with keyup function.

A:

With Char Order Maintained uses tinysort plugin:
http://jsfiddle.net/EJ9y7/3/
Refer here
Also the sorting function may need a better way from sorting hints
$(document).ready(function () {
    $('#new-to-do-item').keyup(function (e) {
        if (e.which === 13) {
            var text = $(this).val();
            var listItem = "<li><input type='checkbox'>" + text + "</li>";
            $(listItem).appendTo('.list');
        }
    });
});

//sort
$(document).on('click', '#coolthings', function () {
    var sorted = $(".list li").sort(asc_sort);
    $(".list").append(sorted);
    function asc_sort(a, b) {
        return ($(b).text().toUpperCase()) < ($(a).text().toUpperCase()) ? 1 : -1;

    }
});

