<!DOCTYPE html>
<
html
>
<
head
>
<
script
src
=
</
script
>
<
meta
charset
=
"utf-8"
/>
<
meta
name
=
"viewport"
content
=
"width=device-width"
/>
<
style
>
body {
text-align: center;
}
#nonSelected {
position: absolute;
top: 150px;
left: 350px;
width: 250px;
height: 280px;
background-color: lightblue;
border-width: 2px;
border-style: dotted;
border-color: black;
padding: 10px;
}
#selected {
position: absolute;
top: 150px;
left: 20px;
width: 250px;
height: 280px;
background-color: lightgreen;
font-style: italic;
border-width: 2px;
border-style: solid;
border-color: black;
padding: 10px;
}
</
style
>
</
head
>
<
body
>
<
h2
style
=
"color: green"
>GeeksforGeeks</
h2
>
<
b
>Make groups of three colors.</
b
>
<
div
id
=
"nonSelected"
>
<
div
id
=
"div1"
onclick
=
"move(this)"
style
=
"background-color: green"
>
Inner division one
</
div
>
<
div
id
=
"div2"
onclick
=
"move(this)"
style
=
"background-color: blue"
>
Inner division two
</
div
>
<
div
id
=
"div3"
onclick
=
"move(this)"
style
=
"background-color: red"
>
Inner division three
</
div
>
<
div
id
=
"div1"
onclick
=
"move(this)"
style
=
"background-color: green"
>
Inner division one
</
div
>
<
div
id
=
"div2"
onclick
=
"move(this)"
style
=
"background-color: blue"
>
Inner division two
</
div
>
<
div
id
=
"div3"
onclick
=
"move(this)"
style
=
"background-color: red"
>
Inner division three
</
div
>
<
div
id
=
"div1"
onclick
=
"move(this)"
style
=
"background-color: green"
>
Inner division one
</
div
>
<
div
id
=
"div2"
onclick
=
"move(this)"
style
=
"background-color: blue"
>
Inner division two
</
div
>
<
div
id
=
"div3"
onclick
=
"move(this)"
style
=
"background-color: red"
>
Inner division three
</
div
>
<
div
id
=
"div1"
onclick
=
"move(this)"
style
=
"background-color: green"
>
Inner division one
</
div
>
<
div
id
=
"div2"
onclick
=
"move(this)"
style
=
"background-color: blue"
>
Inner division two
</
div
>
<
div
id
=
"div3"
onclick
=
"move(this)"
style
=
"background-color: red"
>
Inner division three
</
div
>
<
div
id
=
"div1"
onclick
=
"move(this)"
style
=
"background-color: green"
>
Inner division one
</
div
>
<
div
id
=
"div2"
onclick
=
"move(this)"
style
=
"background-color: blue"
>
Inner division two
</
div
>
<
div
id
=
"div3"
onclick
=
"move(this)"
style
=
"background-color: red"
>
Inner division three
</
div
>
</
div
>
<
div
id
=
"selected"
></
div
>
<
script
>
function move(elem) {
if ($(elem).parent().attr("id") == "nonSelected") {
$(elem).detach().appendTo("#selected");
} else {
$(elem).detach().appendTo("#nonSelected");
}
}
</
script
>
</
body
>
</
html
>