I am trying to create two buttons: one that adds a circle to the web page and one that deletes a circle

I am trying to create two buttons: one that adds a circle to the web page and one that deletes a circle.

There can be no more than 5 circles on the stage. If the add button is clicked and there are five circles on the page, an alert will pop up that tells the user no more circles can be added.

var circle = document.getElementById('#div');

$(function() {
    $('#buttonOne').on('click', addItem);
    $('#buttonTwo').on('click', removeItem);
});


function addItem(){

    if (circle > 5) {
        alert('You cannot add more than 5 objects');
    } else {
        document.body.appendChild(div);
    };

}

function removeItem(){

    if (circle== 0) {
        alert('You have not added anything yet');
    } else {
        $(this).remove();
    };
}​

.circle {
    display: block;

    width: 50px;
    height: 50px;

    border-radius: 50%;

    transition: background-color 350ms;
    
    background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="button" value="Add Circle" id="buttonOne"/>
<input type="button" value="Delete Circle" id="buttonTwo"/>
<div class="circle"></div>
<p></p>

<script src="week4.js" type="text/javascript"></script>