Q:

Align draggable elements in line and generate without overflow or new line

I have this script I'm working on. 
What it should do is generate a new div every time I press a button and I've already done that, but those are not draggable. I think that happens because of the onLoad function but alternative do I have?
The second problem is that when I click one of the blue boxes, all of them must arrange in a line like you see them when you load my jsFiddle link, and if the line is full and you click the "New Square" button, instead of overflowing or add a new line, it would close the last box instead and add a new box before all of the other boxes.
I'm sorry to bother you with those questions, but I am a PHP and MySQL programmer, I just started using jQuery. 
jsFiddle
HTML:
<div id="container">
    <div class="round"></div> 
    <div class="round"></div>
    <div class="round"></div>
    <div class="round"></div>
</div>
<br><br><br>
<input type="button" class="button" value="New Square">

jQuery:
$('.round').draggable();

$('.button').click(
    function (){
$("#container").append("<div class='round'></div>");
    });

$('.round').click (

    );

I had more code in jQuery, but I removed all of the useless options because I want you to easily understand what I want to do.

A:

you have to assign the draggable class to the newly created object:
$('.button').click(
   function (){ 
    $("#container").append("<div class='round'></div>");
    $(".round").draggable();
});  

That should do  it actually. Or Perhaps: 
$("#container").append("<div class='round draggable'></div>");

