Second exercise

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="up">Up</button>
<button id="down">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() {

    $('button#down').click(function() {
        $('.boxone .elem').first().appendTo('.boxtwo');
    });
    $('button#up').click(function() {
        $('.boxtwo .elem').last().prependTo('.boxone');
    });

});