jquery insert elements after a selector

am trying to insert an element after a selector using jquery but I couldn't get it right. If anyone can help, i would appreciate it..

<div id="blog_cal" class="calendar_panel_bottom_noborder calendar_view">
    <div id="csrf" class="hidden_div"><div style="display:none"><input type="hidden" value="f5a7b1a73fb84b7f9f3f363b586a9d16" name="csrfmiddlewaretoken"></div></div>
    <span class="month">August, 2011</span>


        <span class="day_name">M</span>

        <span class="day_name">T</span>

        <span class="day_name">W</span>

        <span class="day_name">T</span>

        <span class="day_name">F</span>

        <span class="day_name">S</span>

        <span class="day_name">S</span>




            <span class="date">1</span>

            <span class="date">2</span>

            <span class="date">3</span>

            <span class="date">4</span>

            <span class="date">5</span>

            <span class="date">6</span>

            <span class="date">7</span>




            <span class="date">8</span>

            <span class="date">9</span>

            <span class="date"><a href="#">10</a></span>

            <span class="date">11</span>

            <span class="date">12</span>

            <span class="date">13</span>

            <span class="date">14</span>




            <span class="date">15</span>

            <span class="date">16</span>

            <开发者_运维知识库;span class="date">17</span>

            <span class="date">18</span>

            <span class="date">19</span>

            <span class="date">20</span>

            <span class="date">21</span>




            <span class="date">22</span>

            <span class="date">23</span>

            <span class="date">24</span>

            <span class="date">25</span>

            <span class="date">26</span>

            <span class="date">27</span>

            <span class="date">28</span>




            <span class="date">29</span>

            <span class="date">30</span>

            <span class="date">31</span>

            <span class="date"></span>

            <span class="date"></span>

            <span class="date"></span>

            <span class="date"></span>






    <a href="/blog/archives/2011/7/" id="blog_cal_next" class="calendar_nav">next</a> <a href="/blog/archives/2011/9/" id="blog_cal_prev" class="calendar_nav">prev</a>
    <div class="clear"></div>
</div>

what am trying to do is clear all the span where class=date and then insert new span's right after the span where class is day_name. I tried the following but it was inserting in reverse

        $('#'+CalId).find('span[class~="date"]').remove();

        var filler = $('#'+CalId).find('span[class~="day_name"]').last();

        $.when(AjaxNavigate(this, CalId))
        .then(function(data) {
                   $.each(data.days[0], function(index, week){
                       $.each(week, function(index, day) {
                           // repopulate date fields
                          filler.after('<span class="date">'+day[0]+'</span>');
                       });
                   });
                });

You could do

filler = $('<span class="date">'+day[0]+'</span>').insertAfter(filler);

But it is actually better to minimize the number of reflows and insert the HTML all at once:

var html = $.map(data.days[0], function(week){
    return $.map(week, function(day) {
        return '<span class="date">'+day[0]+'</span>');
     }).get().join('');
}).get().join('');

filler.after(html);