<html>
<head>
<script
src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function
moveButton(elem){
if(
$(elem).parent().attr("id") == "nonSelected" ){
$(elem).detach().appendTo('#selected');
}
else{
$(elem).detach().appendTo('#nonSelected');
}
}
</script>
<style
type="text/css">
#nonSelected{
position:
absolute;
top:
10px;
left:
10px;
width:
180px;
height:
180px;
background-color:pink;
border-width:
1px;
border-style:
dotted;
border-color:
black;
padding:
10px;
}
position:
absolute;
top:
10px;
left:
200px;
width:
180px;
height:
180px;
background-color:blue;
border-width:
1px;
border-style:
dotted;
border-color:
black;
padding:
10px;
}
</style>
</head>
<body>
<div
id="nonSelected">
<button
id="btn1" onclick="moveButton(this)"
type="button">Button1</button>
<button
id="btn2" onclick="moveButton(this)"
type="button" >Button2</button>
<button
id="btn3" onclick="moveButton(this)"
type="button">Button3</button>
</div>
<div
id="selected">
</div>
</body>
</html>
