Javascript как правильно отсортировать div элементы?

<div class="main">
        <div class="cild" id="2">2</div>   
        <div class="cild" id="3">3</div>   
        <div class="cild" id="1">1</div>   
        <div class="cild" id="24">24</div>   
    </div>

<div class="main">
        <div class="cild" id="1">1</div>   
        <div class="cild" id="2">2</div>   
        <div class="cild" id="3">3</div>   
        <div class="cild" id="24">24</div>   
    </div>

$(function () {
    var div_conteiner = jQuery.makeArray($('.main div'));
    div_conteiner.sort(function (a, b) {
        var an = a.id,
            bn = b.id;
            var c = 0
            if (an > bn) c = 1;
            if (an < bn) c = -1;
            return c
    });

    $.map(div_conteiner, function (div) {
        $(div).appendTo($('.main'))
    });

});

<div class="main">
        <div class="cild" id="1">1</div>   
        <div class="cild" id="2">2</div>   
        <div class="cild" id="24">24</div>   
        <div class="cild" id="3">3</div>   
    </div>