How to create a note like this TodoMvc example

Question

i want to create a note form like this under link using jQuery Html Css Js. http://todomvc.com/examples/flight/

here is my html code:

<form id="myform" action="whatever.php">
    <lable name="text">enter text</label>
    <input id="in" type="text" placeholder="What needs to be done?" />
    <input type="submit" value="Enter" />
</form>

<div class="results">
    <ul class="list">
    </ul>
</div>

here is my jquery:

$( document ).ready(function() {
    $('#myform').submit(function(e){
        var val = $(this).find('#in').val();
        $('ul.list').append('<input id="check" type="checkbox"><p>' + val + '</p>');
        e.preventDefault();
    });

    $('ul.list').on("click", "input", function(){
        if( $(this).is(':checked') ) {
            $(this).next('p').css("text-decoration" ,  "line-through");
        } else {
            $(this).next('p').css("text-decoration", "none");
        }
    });
});

i want:

1. the checkbox input type and p tag are in same line

2. add a delete button next to each of the checkbox to delete that note

3. a button to check all the box and uncheck all