Second exercise: up and down

create two divs. The first contains 10 divs. each time you click to the button down the first item of the first div goes to the second box. each time you click to the button up the first item of the second div goes to the first box.

by CloughyLow

HTML

<div class="box boxone">
    <div class="elem">1</div>
    <div class="elem">2</div>
    <div class="elem">3</div>
    <div class="elem">4</div>
    <div class="elem">5</div>
    <div class="elem">6</div>
    <div class="elem">7</div>
    <div class="elem">8</div>
    <div class="elem">9</div>
    <div class="elem">10</div>
</div>
<button id="upBtn">Up</button>
<button id="downBtn">Down</button>
<div class="box boxtwo">
</div>

CSS

.box {
    width: 103px;
    height: 103px;
    background: #ccc;
    padding: 2px 0 0 2px;
}
.box .elem {
    width: 21px;
    height: 21px;
    float: left;
    background: #22c2cc;
    margin: 2px 2px;
}

JavaScript

$(document).ready( function() {

    $('#downBtn').click(function() {
        $('.boxone .elem').first().appendTo('.boxtwo');
    });
    $('#upBtn').click(function() {
        $('.boxtwo .elem').last().prependTo('.boxone');
    });

});