jQuery перенос всех заголовков и элементов ниже до следующего заголовка

Question

Я хочу обернуть заголовок, включая элементы под ним, до следующего заголовка в один делитель.

Я думаю о циклическом прохождении всех заголовков и получении всех элементов до последнего элемента. Но я не знаю, как правильно его выполнить.

<h3>
   Login
</h3>
<p>asdadadadasd</p>
<h3>
    Register
</h3>
<p><strong>asdsadasdasd</strong></p>
<h4>
    test
</h4>
<p>dasdad</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>as</p>
<p>das</p>
<p>da</p>
<p>sd</p>
<p>asd</p>
<p>asd</p>
<p>as</p>
<p>das</p>
<p>d</p>
<h4>
    another-under
</h4>
<p>asdas<br>
    das<br>
    da<br>
    sd<br>
    as<br>
    das<br>
    das<br>
    d<br>
    asd<br>
    asd<br>
    as<br>
    das<br>
    d<br>
    asd<br>
    as<br>
    das</p>
<h4>
    app-check-onrange
</h4>
<p><code>dasd</code></p>
<p>asd</p>
<p>as</p>
<p>das</p>
<p>das</p>
<p>d</p>
<p>asd</p>
<p>as</p>
<p>das</p>
<p>d</p>

Так что приведенный выше код будет выглядеть примерно так

    <div>
       <h3>Login</h3>
       <p>...</p>
       ...othercontent
    </div>
     <div>
       <h3>Register</h3>
       <p>...</p>
       ...othercontent
    </div>
    <div>
       <h4>test</h4>
       <p>...</p>
       ...othercontent
    </div>
    <div>
       <h4>another-under</h4>
       <p>...</p>
       ...othercontent
    </div>