append checkbox inside returns [object, Object]

i have a small project working on. when i add items on my array it will display on a table below my fields.

My problem is that when i try to append a checkbox it returns [object, Object].

refer to my code below

<div class="container">
    <input id="list-input" />
    <select id="select-status">
        <option value="on-going">on-going</option>
        <option value="completed">completed</option>
    </select>
    <button id="add">Add To List</button>
    <button id="delete">Remove From List</button>
</div>
<div class="container">
    <h1>Your List</h1>

    <div id="mylist">
        <table id="mylist">
            <thead>
                <th>ID Number</th>
                <th>Description</th>
                <th>Status</th>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <button id="clear">clear</button>
</div>

my script.js

var tasks = [];
var count = 0;

$('document').ready(function(){

$('#add').click(function() {
    var desc    = $.trim($('#list-input').val());
    var status  = $('#select-status option:selected').val();
    var id      = Date.now();
    item        = {};

    if (!desc) {
        item.id = "";
        alert("Input a description");
        return;
    }

    item.id          = id;
    item.description = desc;
    item.status      = status;
    tasks.push(item);

    var tr  = "<tr>";
    var td1 = "<td id="+ item.id +">" + item.id + "</td>";
    var td2 = "<td>" + item.description + "</td>";
    var td3 = "<td>" + item.status + "</td>";
    var td4 = "<td>" + $('<input/>',{'type':'checkbox'}) + "</td>" ;

    $("#mylist tbody").append(tr + td1 + td2 + td3 + td4);

    //clear input field
    $('#list-input').val('');
});

//clear list function
$('#clear').click(function(){
    tasks = [];

    $('#mylist tbody').empty();

    setTimeout(function(){
        alert("List is now empty!");
    }, 500);

});

//remove list function

$('#delete').on('click', function() {
  $('#mylist input:checked').closest('#item').remove();
});

});