Moving Elements between divs

Having one div with a number of buttons and when clicking them moving the button to another div.

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<div id="nonSelected">
 
    <input id="btnDefault" onclick="moveButton(this)" type="button" class="btn btn-default" value="1" />
    <input id="btnDefault" onclick="moveButton(this)" type="button" class="btn btn-default" value="2" />
    <input id="btnDefault" onclick="moveButton(this)" type="button" class="btn btn-default" value="3" />
    <input id="btnDefault" onclick="moveButton(this)" type="button" class="btn btn-default" value="4" />
    <input id="btnDefault" onclick="moveButton(this)" type="button" class="btn btn-default" value="5" />
    <input id="btnDefault" onclick="moveButton(this)" type="button" class="btn btn-default" value="6" />



</div>


<div id="selected">

</div>

CSS

#nonSelected{
    position: absolute;
    top: 10px;
    left: 10px;
    width: 200px;
    height: 200px;
    background-color: #993333;
    border-width: 1px;
    border-style: dotted;
    border-color: black;
    padding: 10px;
}

#selected{
    position: absolute;
    top: 10px;
    left: 220px;
    width: 200px;
    height: 200px;
    background-color: #339933;
    border-width: 1px;
    border-style: dotted;
    border-color: black;
    padding: 10px;
}

JavaScript

function moveButton(elem){
    if( $(elem).parent().attr("id") == "nonSelected" ){
        $(elem).detach().appendTo('#selected');
    }
    else{
        $(elem).detach().appendTo('#nonSelected'); 
    }
}