Javascript reverse order within dividers
<p>I have code like:</p>

<pre><code>&lt;div class="a"&gt;Main&lt;/div&gt;
&lt;div class="b"&gt;1&lt;/div&gt;
&lt;div class="b"&gt;2&lt;/div&gt;
&lt;div class="b"&gt;3&lt;/div&gt;
&lt;div class="a"&gt;Another&lt;/div&gt;
&lt;div class="b"&gt;4&lt;/div&gt;
&lt;div class="b"&gt;5&lt;/div&gt;
</code></pre>

<p>And I want the output to be:</p>

<pre><code>&lt;div class="a"&gt;Main&lt;/div&gt;
&lt;div class="b"&gt;3&lt;/div&gt;
&lt;div class="b"&gt;2&lt;/div&gt;
&lt;div class="b"&gt;1&lt;/div&gt;
&lt;div class="a"&gt;Another&lt;/div&gt;
&lt;div class="b"&gt;5&lt;/div&gt;
&lt;div class="b"&gt;4&lt;/div&gt;
</code></pre>

<p>Am trying to use the following but it does not work correctly:</p>

<pre><code>$.fn.reverseOrder = function() {
    return this.each(function() {
        $(this).prependTo( $(this).parent() );
    });
};

$('.b').reverseOrder();
</code></pre>

<p>Because it reverses all the b divs to the top. Am a little lost. Any idea how to achieve this?</p>

<p>I do not wish to modify the code to add more divs inside it to contain them as it breaks other code of mine (not provided here).</p>

<p>I think I have to use nextAll and nextUntil functions. </p>
