Edit in JSFiddle

$(document).ready(function() {
    $('#new-status form').submit(function(e) {
        e.preventDefault();

        var text = $('#new-status').find('textarea').val();
        $.ajax({
            url: '/echo/json/',
            type: 'POST',
            dataType: 'json',
            data: { text: text, json: JSON.stringify({'text': text }) },
            success: function(data) {
                var $li = $('<li>');
                var $input = $('<input>', {'type': 'checkbox'});
                $li.append($input);
                $li.append($('<label>', {'text': data.text, 'data-text': data.text}));
                
                $input.change(function() {
                    $('h1 span').text($('#new-status input:not(:checked)').length);    
                    var $label = $(this).parent().find('label');
                    
                    $label.text($label.attr('data-text') + ($(this).is(":checked") ? " (Done!)" : ""));
                }).trigger('change');
                
                $('#statuses').append($li);
                $('#new-status').find('textarea').val('');
            }
        });
    });
});
<div id="new-status">
    <h1>
        Todo (<span>0</span> left)
    </h1>
    
    <form>
        <textarea id="new-status"></textarea>
        <button type="submit">Add</button>
    </form>
    <ul id="statuses"></ul>
</div>

              
            
          
            
              

External resources loaded into this fiddle: