JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/tinysort/1.5.6/jquery.tinysort.charorder.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/tinysort/1.5.6/jquery.tinysort.js"></script>
<input id="new-to-do-item" type="text">
<ul class="list">
    <li>
        <input type='checkbox'>d</li>
    <li>
        <input type='checkbox'>c</li>
    <li>
        <input type='checkbox'>b</li>
    <li>
        <input type='checkbox'>a</li>
</ul>
<input id="coolthings" type="button" value="sort">

JavaScript

$(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").tsort();
});