drawing question

HTML

<div class="elems"></div>
<div class="draw">
    
</div>

CSS

html, body {
    height: 100%;
    width: 100%;
}

p {
    padding: 2px 0;
    margin: 0
}

.elems {
    background: #cfc;
    width: 150px;
    padding: 5px;
    height: 100%;
    overflow-y: auto;
    position: absolute;
}

.draw {
    width: 100%;
    height: 100%;
    background: #efe;
}

.rec {
    width: 50px;
    height: 50px;
    background: green;
    position: absolute;
}

JavaScript

var num=0;
$('.draw').mousedown(function(e){
    var newDiv = null;
    newDiv = $('<div>').addClass('rec').css({
        'top': e.pageY,
        'left': e.pageX
    }).appendTo(this);
    $(this).mouseup(function(){
        num++
        $('.elems').append($('<p>').text('info '+num));
       $(this).unbind("mouseup");
    });
});