jQuery create and remove <div> by click
<p>Hi I try to wirte a function, which enables the user to create a  when he clicks on a certain area of the site, and when he clicks on that created div again, it gets deleted. Somehow I can only create divs and when I click them, a new one is created instead removing of the clicked one. I also implemented a function in which the user can determain if he wants to create a div or delete a div.</p>

<pre><code>&lt;!--changed #button to #conten--&gt;
&lt;div id='content'&gt;&lt;/div&gt;
&lt;button id='btn'&gt;&lt;/button&gt;



var i = 0;
var remove = false;
$('#content').click(function(e) {
    $('&lt;div&gt;&lt;/div&gt;').attr({
        'id' : i
    }).addClass('circle').css({
        'top' : e.pageY - 20,
        'left' : e.pageX - 20
    }).appendTo('#button');
    i++;
});

$('.circle').click(function (){
    if(remove == true){
        $(this).remove();
    }
    else{
        //just to see if it was clicked
        $(this).css({'background-color': 'red'});
    }
});
$('#btn').toggle(function() {
    $('#btn').text('add');
    remove = true;
}, function() {
    $('#btn').text('remove');
    remove = false;
});
</code></pre>
