Clone images into one div with class name

I have a jsfiddle here - http://jsfiddle.net/drRG9/

and live demo here - http://www.ttmt.org.uk/forum/clone/

It's two div's (yellow) with the same class name 'article'.

Each yellow div contains a div with class name 'images' (red border).

First yellow div contains a list of images I would like to clone to IT'S images div

So the images should be cloned to the first red border div and not the bottom one.

So how do I clone the images just to the one div with a class name.

I hope that makes sense.

    <!DOCTYPE html>
    <html>
      <meta charset="UTF-8">
      <title>Title of the document</title>
      <meta name="description" content="">
      <meta name="keywords" content="">
      <meta name="robots" content="">

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>


      <style type="text/css">
        *{
          margin:0;
          padding:0;
        }
        html,body{
          height:100%;
          background:#ddd;
        }
        #wrapper{
          min-height:100%;
          max-width:800px;
          margin:0 auto;
          background:#fff;
          margin-top:-20px;
          padding-top:40px;
        }
        .article{
          background:yellow;
          margin:20px;
        }
        ul{
          list-style:none;
          margin:10px;
        }
        ul li{
          display:inline-block;
        }
        .images{
          min-height:20px;
          border: 1px solid red;
        }
      </style>

      </head>

    <body>

      <div id="wrapper">
        <div class="article">

          <div class="text">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
            </p>
            <ul>
              <li><img src="images/red01.jpg" /></li>
              <li><img src="images/red02.jpg" /></li>
              <li><img src="images/red03.jpg" /></li>
              <li><img src="images/red04.jpg" /></li>
            </ul>
          </div><!-- .text -->
          <div class="images">

          </div><!-- .images -->

        </div><!-- .article -->



        <div class="article">

          <div class="text">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
            </p>
          </div><!-- .text -->
          <div class="images">

          </div><!-- .images -->

        </div><!-- .article -->


      </div>  

      <script>

        $(function(){

          $('.text ul').clone().appendTo('.article .images', this);

        })

      </script>  

    </body>

    </html>

Solution

Try this:

$('.text ul').clone().appendTo('.article:first .images', this);

This will only clone into the first .article.

As your comment, you can try this:

var closest = $('.text ul').closest('.article');
$('.text ul').clone().appendTo(closest.find('.images'));

You can see .closest() for more information.

update

Since you have more than one <ul>, you need wrap this code in .each().

Try this code:

$('.text ul').each(function(){
  var closest = $(this).closest('.article');
  $(this).clone().appendTo(closest.find('.images'));
});