Sort jQuery elements

Trying to figure out a more scalable solution to sorting DOM elements using jQuery

by Laurie

HTML

<div class="bdayCol">
    <div class="bdayContainer service" data-sort="2">
        <p>Tuesday, December 2, 2014</p>
        <p>Happy Service Anniversary!
            <br/>1 year with TMM!</p>
        <p>Alex Ascha</p>
        <p>Claims - WC - CSO</p>
        <p>PAS</p>
    </div>
    <div class="bdayContainer service" data-sort="23">
        <p>Tuesday, December 23, 2014</p>
        <p>Happy Service Anniversary!
            <br>23 years with TMM!</p>
        <p>Anita Scott</p>
        <p>UW -Commerical UW Operations</p>
        <p>NY</p>
    </div>
    <div class="bdayContainer service" data-sort="8">
        <p>Monday, December 8, 2014</p>
        <p>Happy Service Anniversary!
            <br>11 years with TMM!</p>
        <p>Conchita Godinez</p>
        <p>UW -RM Unit Core</p>
        <p>NY</p>
    </div>
    <div class="bdayContainer service" data-sort="10">
        <p>Wednesday, December 10, 2014</p>
        <p>Happy Service Anniversary!
            <br>2 years with TMM!</p>
        <p>Daniel Fosnot</p>
        <p>UW -Middle Market Accounts</p>
        <p>CIN</p>
    </div>
    <div class="bdayContainer service" data-sort="30">
        <p>Tuesday, December 30, 2014</p>
        <p>Happy Service Anniversary!
            <br>23 years with TMM!</p>
        <p>David Clark</p>
        <p>UW -RM Unit Core</p>
        <p>NY</p>
    </div>
    <div class="bdayContainer service" data-sort="6">
        <p>Saturday, December 6, 2014</p>
        <p>Happy Service Anniversary!
            <br>15 years with TMM!</p>
        <p>Elenita Lanham</p>
        <p>UW -Commercial Lines</p>
        <p>PAS</p>
    </div>
    <div class="bdayContainer service" data-sort="7">
        <p>Sunday, December 7, 2014</p>
        <p>Happy Service Anniversary!
            <br>5 years with TMM!</p>
        <p>Francis Ramirez</p>
        <p>UW -Personal Lines</p>
        <p>PAS</p>
    </div>
    <div class="bdayContainer service" data-sort="27">
        <p>Saturday, December 27, 2014</p>
       ...

CSS

.bdayContainer {
    border:1px #000000 solid;
    margin:7px;
    width:50%;
}
.test {
    background-color:green;
}
.gift {
    background-color:blue;
}
.cake {
    background-color:red;
}
.thumbs {
    background-color:yellow;
}

JavaScript

//add random number of icon div to bdayCol container
$(document).ready(function(){
    
    //define container
    var container = $('.bdayCol');
    
    //get number of icon divs to insert
    var items = Array(3,4,5,6,7);
    var n = items[Math.floor(Math.random()*items.length)];
  

    //append n number of icon divs to the container    
    for ( i = 0; i < n; i++ ) {
        var orderArray = Array(1, 3,8,12,14,15,16,17,18,19,21,22,23,24,25,26,27,28,29,30,31);
        var order = orderArray[Math.floor(Math.random()*orderArray.length)];
        var iconDiv = '<div class="test" data-sort="'+order+'">'+order+'</div>';
        container.append($(iconDiv));

    }
    
   });