jQuery this/each question

HTML

<hr>Starting Point:</br>
<div class="grey-expected">
    <div class="red-expected">A</div>
</div>
<div class="grey-expected">
    <div class="red-expected">B</div>
</div>
<hr>Expected Result after JS:</br>
<div class="grey-expected">
    <div class="red-expected">A</div>
    <div class="blue-expected">
        <div class="red-expected">A</div>
    </div>
</div>
<div class="grey-expected">
    <div class="red-expected">B</div>
    <div class="blue-expected">
        <div class="red-expected">B</div>
    </div>
</div>
<hr>Actual Result after JS:
<br>
<div class="grey">
    <div class="red">A</div>
</div>
<div class="grey">
    <div class="red">B</div>
</div>

CSS

.grey, .grey-expected {
    width:150px;
    height:150px;
    background:#ccc;
    margin:5px;
    display:inline-block;
    vertical-align:top;
}
.blue, .blue-expected {
    width:50px;
    height:50px;
    background:blue;
    margin:2px;
}
.red, .red-expected {
    width:25px;
    height:25px;
    background:red;
    margin:2px;
}

JavaScript

// Step One: Append one blue box within each grey box

$('.grey').append('<div class="blue"></div>');

// Step Two: Make one copy of the red box already there, and place it within the new blue box.

$('.grey').each(function () {    $(this).children('.red').clone().appendTo($(this).children('.blue'));
});