JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="list"><li>foo</li><li>bar</li></ul>

<input type="text" id="new-to-do-item"></input>
<p><a href="#" id="coolthings">sort</a></p>

JavaScript

$(function(){
     $('#new-to-do-item').keyup(function(e) {
         console.log(e.which == 13);
         if (e.which == 13) {
           var text = $(this).val();
           var listItem = "<li><input type='checkbox'>" + text + "</li>";
           $(listItem).appendTo('.list');
           $(this).val('');
        }
     });
    
    $(document).on('click', '#coolthings',function(){
        $(".list li").detach().sort(asc_sort).appendTo('.list');
       function asc_sort(a, b){
           return ($(b).text()) < ($(a).text()) ? 1 : -1;    
       }
    });
});