Checklist app adds three items at a time instead of one

HTML

<%= javascript_include_tag "checklist" %
<div id="content">
    <h3>Today's To-Do</h3>
    <input type="text" id="itemText"/>
    <input type="button" id="addCL" value="Add Item"/>
    <div id="clItems"></div>

JS file

var itemNum=1;
    $("document").ready(function(){
        $("#addCL").click(function(){
            var itemId="c"+itemNum;
            var itemVal= $("#itemText").val();
            $("#clItems").append("<p><input type='checkbox' id='"+itemId+"'/><label style='font-weight:bold; color:black'  for="+itemId+">"+itemVal+"</label></p>");
            itemNum++;
            });
        $("body").on('change','input[type=checkbox]',function(){
            if(this.checked){
                $("label[for="+this.id+"]").css("text-decoration","line-through").css('font-weight','normal').css('color','black');
                        $('itemText').text('');
                }
            else{
                $("label[for="+this.id+"]").css("text-decoration","none").css('font-weight','bold').css('color',"black");
                }
            });
        });

Also, if I put the script in the same file as the html, it ends up adding two items at a time, rather than three.