title: Turn header-delimited sequences of paragraphs into Bootstrap panels with jQuery
body: <p>I have a web page where the HTML is generated from Markdown, and I'd like to achieve the following using jQuery without adding any HTML/Markdown (e.g. classes, ids...) to the page.</p>
  
  <p>My current HTML consists of an <em>arbitrary number of</em> <code>p</code>s that follow <code>h4</code>s, which looks like the following:</p>
  
  <pre><code>&lt;h4&gt;Foo&lt;/h4&gt;
  &lt;p&gt;...&lt;/p&gt;
  &lt;p&gt;...&lt;/p&gt;
  
  &lt;h4&gt;Bar&lt;/h4&gt;
  &lt;p&gt;...&lt;/p&gt;
  &lt;p&gt;...&lt;/p&gt;
  &lt;p&gt;...&lt;/p&gt;
  &lt;p&gt;...&lt;/p&gt;
  
  &lt;h4&gt;Baz&lt;/h4&gt;
  &lt;p&gt;...&lt;/p&gt;
  &lt;p&gt;...&lt;/p&gt;
  &lt;p&gt;...&lt;/p&gt;
  </code></pre>
  
  <p>What I'd like to achieve, in as little jQuery code as possible, is to turn that into the following:</p>
  
  <pre><code>&lt;div class="panel panel-default"&gt;
    &lt;div class="panel-heading"&gt;Foo&lt;/div&gt;
    &lt;div class="panel-body"&gt;
      &lt;p&gt;...&lt;/p&gt;
      &lt;p&gt;...&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="panel panel-default"&gt;
    &lt;div class="panel-heading"&gt;Bar&lt;/div&gt;
    &lt;div class="panel-body"&gt;
      &lt;p&gt;...&lt;/p&gt;
      &lt;p&gt;...&lt;/p&gt;
      &lt;p&gt;...&lt;/p&gt;
      &lt;p&gt;...&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="panel panel-default"&gt;
    &lt;div class="panel-heading"&gt;Baz&lt;/div&gt;
    &lt;div class="panel-body"&gt;
      &lt;p&gt;...&lt;/p&gt;
      &lt;p&gt;...&lt;/p&gt;
      &lt;p&gt;...&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What jQuery code can accomplish this?</p>
  
  <p>Some constraints:</p>
  
  <ul>
  <li>Any number of <code>p</code>s can follow an <code>h4</code>.</li>
  <li>Nothing else but <code>p</code>s follow an <code>h4</code>; e.g. you never get an [<code>h4</code>, <code>p</code>, <code>p</code>, <code>div</code>, <code>p</code>].</li>
  <li>There are no other <code>h4</code>s anywhere else on the page, outside of this content.</li>
  <li>There are other <code>p</code>s elsewhere on the page (e.g. header, footer).</li>
  <li>Anything but a <code>p</code> can follow the final [<code>h4</code>, <code>p</code>, <code>p</code>, ...] sequence.</li>
  </ul>