Moving Elements between divs

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

by Al Kasih

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">

    <!-- TWO INPUT TAGS --> 
    <input id="btnDefault" onclick="moveButton(this)" type="button" class="btn btn-default" value="Default" />
    <input id="btnPrimary" onclick="moveButton(this)" type="button" class="btn btn-primary" value="Primary" />
    
    <!-- THREE BUTTON TAGS -->
    <button id="btnDanger" onclick="moveButton(this)" type="button" class="btn btn-danger">Danger</button>
    <button id="btnWarning" onclick="moveButton(this)" type="button" class="btn btn-warning">Warning</button>
    <button id="btnSuccess" onclick="moveButton(this)" type="button" class="btn btn-success">Success</button>

</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'); 
    }
}