I've four checkboxes in one div.

```
<div id="tab1" class="tab-pane">
    <input type="checkbox" id="chkbox" value="101">  This is 101
    <input type="checkbox" id="chkbox" value="102">  This is 102
    <input type="checkbox" id="chkbox" value="103">  This is 103
    <input type="checkbox" id="chkbox" value="104">  This is 104
</div>

```

Now on each click, I want to insert/remove a `<li>` item on another div that's on the right hand side when the checkbox is checked/unchecked. Another div:

```
<div id="items">
    <ul id="itemList">
    </ul>

```

Am doing something like this:

```
$("#chkbox").click(function() {
            // If checked
            if ($(this).is(":checked")) {
                //add to the right
                $a = $(this).val();
                $("#itemList").append('<li>'+$a+'</li>');
            }
            else {
                //hide to the right
                $("#itemList").slideUp("fast", function () {
                        $("#itemList").child.remove();
                    });
            }
        });

```

This doesn't seem to work :(