div가 동적으로 생성 될 때 div 정렬이 작동하지 않음

다음 스크립트를 사용하여 특정 속성 (성별, 수준, 이름 등)으로 표시된 속성으로 div 목록을 정렬하려고합니다.

html :

<div id="sortThis" class="col-xs-12 alert-container">
    <div id="1" class="container-element sortable box box-blue" data-gender="1" data-level="4" data-name="AAA">   <h3>AAA</h3><div class="panel-body">AAA is resp</div>
    </div>
    <div id="2" class="container-element sortable box box-pink" data-gender="2" data-level="3" data-name="DDD"><h3>DDD</h3><div class="panel-body">DDD is a s</div>
    </div>
    <div id="3" class="container-element sortable box box-blue" data-gender="1" data-level="2" data-name="FFF"><h3>FFF</h3><div class="panel-body">FFF has mad</div>
    </div>
    <div id="4" class="container-element sortable box box-pink" data-gender="2" data-level="4" data-name="CCC"><h3>CCC</h3><div class="panel-body">CCC has ma</div>
    </div>
    <div id="5" class="container-element sortable box box-pink" data-gender="2" data-level="2" data-name=EEE><h3>EEE</h3><div class="panel-body">EEE is a f</div>
    </div>
    <div id="6" class="container-element sortable box box-blue" data-gender="1" data-level="3" data-name="BBB"><h3>BBB</h3><div class="panel-body">BBB is an ou</div>
    </div>
</div>

<button id="sLevel" class="LbtnSort">Sort by Level</button><br/>
<button id="sGender" class="GbtnSort">Sort by Gender</button><br/>

js :

var LdivList = $(".box");
LdivList.sort(function(a, b){ 
return $(a).data("level")-$(b).data("level")
});

var GdivList = $(".box");
GdivList.sort(function(a, b){ 
return $(a).data("gender")-$(b).data("gender")
});


/* sort on button click */
$("button.LbtnSort").click(function() {
$("#sortThis").html(LdivList);
});

/* sort on button click */
$("button.GbtnSort").click(function() {
$("#sortThis").html(GdivList);
});

.sortable div가 정적 인 경우이 jfiddle이 표시하는 것처럼 정렬이 잘 작동 하지만 #sortable div (예 : .sortable div)의 내용이 동적으로 생성되면 (이 경우 양식 제출의 결과), 정렬 버튼을 누르면 #sortable div의 전체 내용이 사라지고 작동하지 않는 것 같습니다.

도움이나 제안을 주시면 감사하겠습니다.

편집 : 목록의 동적 생성을위한 코드는 다음과 같습니다. 효과적으로 정렬 된 항목 목록에서 데이터를 가져와 출력하는 AXAX 양식 제출입니다.

    $('#formStep2').submit(function(event) {
    // get the form data
    var studentArray = [];

    $(".listbox li").each(function() {
        studentArray.push({
            'name': ($(this).text()),
            'gender': ($(this).closest('ol').attr('id')).substr(0, 1),
            'level': ($(this).closest('ol').attr('id')).substr(2, 3),
            'topic': ($('input[name=topic]').val())
        })
    });
    var studentString = JSON.stringify(studentArray);
    console.log(studentString);
    var formData = {
        'students': studentString,
    };
    // process the form
    $.ajax({
            type: 'POST', // define the type of HTTP verb we want to use (POST for our form)
            url: 'process_step2.php', // the url where we want to POST
            data: formData, // our data object
            dataType: 'json', // what type of data do we expect back from the server
            encode: true
        })
        // using the done promise callback
        .done(function(data) {

            if (!data.success) {
                // error handling to go here.....

            } else {
                $('.alert-container').empty();
                var obj = JSON.parse(data.message);

                //sort the array alphabetically by name (default status)
                var test = obj.sort(function(a,b){
                    var lccomp = a.name.toLowerCase().localeCompare(b.name.toLowerCase());
                    return lccomp ? lccomp : a.name > b.name ? 1 : a.name < b.name ? -1 : 0;
                });

                console.log(test);

                var i=0;
                test.forEach(function(st) {
                    console.log(st['name']);
                    var gen = (st['gender'] == 1) ? "blue" : (st['gender'] == 2) ? "pink" : NULL;
                    $('.alert-container').append('<div id="' + (i+1) + '" class="container-element sortable box box-' + gen + '" data-gender="' + st['gender'] + '" data-level="' + st['level'] + '" data-name="' + st['name'] + '"><h3>' + st['name'] + '</h3><div class="panel-body"><div class="col-xs-9"><i class="fa fa-quote-left fa-3x fa-pull-left fa-' + gen + '" aria-hidden=:true"></i>' + st['comment'] + '</div></div></div>');
                    i++;
                });
                // jump to the next tab
                var $active = $('.wizard .nav-tabs li.active');
                $active.next().removeClass('disabled');
                nextTab($active);
            }
        })
        // using the fail promise callback
        .fail(function(data) {
            // show any errors
            // best to remove for production
            console.log(data);
        });
    // stop the form from submitting the normal way and refreshing the page
    event.preventDefault();
});