jquery - HTMLコンテナの列スタックとして要素を追加するにはどうすればよいですか？

Question

私はこのようなデフォルトのhtml構造が欲しいです：

動的に追加する必要があります。rectangeboxを追加すると、次のようになります。

どうすればこれを行うことができますか？

私がしたことはこのようなものです：

<div style="width:400px;">
        <ul id="UlPopUp" style="-webkit-columns: 2; -moz-columns: 2; columns: 2;">
            <li id='liLeftDescriptions'>
                <span>Item1
                </span>
            </li>
            <li id='liLeftSkills'>
                <span>Item1</span>
            </li>
            <li id='liLeftClient'>
                <span>Item1</span>
            </li>
        </ul>
    </div>

http://jsfiddle.net/6eq56/

Answer 1

$('button').click(function(){
    var elem = $("<div class='item'></div>");
    if($('.col1>div').length < 4)
        $('.col1').append(elem);
    else
        $('.col2').append(elem);
});