jquery insert elements after a selector
<p>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.. </p>

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


        &lt;span class="day_name"&gt;M&lt;/span&gt;

        &lt;span class="day_name"&gt;T&lt;/span&gt;

        &lt;span class="day_name"&gt;W&lt;/span&gt;

        &lt;span class="day_name"&gt;T&lt;/span&gt;

        &lt;span class="day_name"&gt;F&lt;/span&gt;

        &lt;span class="day_name"&gt;S&lt;/span&gt;

        &lt;span class="day_name"&gt;S&lt;/span&gt;




            &lt;span class="date"&gt;1&lt;/span&gt;

            &lt;span class="date"&gt;2&lt;/span&gt;

            &lt;span class="date"&gt;3&lt;/span&gt;

            &lt;span class="date"&gt;4&lt;/span&gt;

            &lt;span class="date"&gt;5&lt;/span&gt;

            &lt;span class="date"&gt;6&lt;/span&gt;

            &lt;span class="date"&gt;7&lt;/span&gt;




            &lt;span class="date"&gt;8&lt;/span&gt;

            &lt;span class="date"&gt;9&lt;/span&gt;

            &lt;span class="date"&gt;&lt;a href="#"&gt;10&lt;/a&gt;&lt;/span&gt;

            &lt;span class="date"&gt;11&lt;/span&gt;

            &lt;span class="date"&gt;12&lt;/span&gt;

            &lt;span class="date"&gt;13&lt;/span&gt;

            &lt;span class="date"&gt;14&lt;/span&gt;




            &lt;span class="date"&gt;15&lt;/span&gt;

            &lt;span class="date"&gt;16&lt;/span&gt;

            &lt;span class="date"&gt;17&lt;/span&gt;

            &lt;span class="date"&gt;18&lt;/span&gt;

            &lt;span class="date"&gt;19&lt;/span&gt;

            &lt;span class="date"&gt;20&lt;/span&gt;

            &lt;span class="date"&gt;21&lt;/span&gt;




            &lt;span class="date"&gt;22&lt;/span&gt;

            &lt;span class="date"&gt;23&lt;/span&gt;

            &lt;span class="date"&gt;24&lt;/span&gt;

            &lt;span class="date"&gt;25&lt;/span&gt;

            &lt;span class="date"&gt;26&lt;/span&gt;

            &lt;span class="date"&gt;27&lt;/span&gt;

            &lt;span class="date"&gt;28&lt;/span&gt;




            &lt;span class="date"&gt;29&lt;/span&gt;

            &lt;span class="date"&gt;30&lt;/span&gt;

            &lt;span class="date"&gt;31&lt;/span&gt;

            &lt;span class="date"&gt;&lt;/span&gt;

            &lt;span class="date"&gt;&lt;/span&gt;

            &lt;span class="date"&gt;&lt;/span&gt;

            &lt;span class="date"&gt;&lt;/span&gt;






    &lt;a href="/blog/archives/2011/7/" id="blog_cal_next" class="calendar_nav"&gt;next&lt;/a&gt; &lt;a href="/blog/archives/2011/9/" id="blog_cal_prev" class="calendar_nav"&gt;prev&lt;/a&gt;
    &lt;div class="clear"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>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 </p>

<pre><code>        $('#'+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('&lt;span class="date"&gt;'+day[0]+'&lt;/span&gt;');
                       });
                   });
                });
</code></pre>
