jquery - Select and wrap specific parent elements with siblings until next specific parent element -

there lot of similar questions on s.o none cover specific task, looking use jquery select p tags grandparent element of span class 'hdr', want wrap p tag , of it's siblings until next p tag parent of 'hdr' class, on , forth.

the problem have 2nd , 3rd wrappers , it's containing content end getting nested inside of previous set of wrappers instead of each wrapper being printed 1 after another.

my initial markup:

<div class="main">      <p><strong><span class="hdr">heading #1</span></strong></p>     <p>some paragraph text</p>     <p>some paragraph text</p>     <p>some paragraph text</p>     <p>some paragraph text</p>      <p><strong><span class="hdr">heading #2</span></strong></p>     <p>some paragraph text</p>     <p>some paragraph text</p>      <p><strong><span class="hdr">heading #3</span></strong></p>     <p>some paragraph text</p>     <p>some paragraph text</p>     <p>some paragraph text</p>     <p>some paragraph text</p>     <p>some paragraph text</p>  </div> 

jquery:

$('.main .hdr').parents('p').each(function () { $(this).nextuntil($(this)).addback().wrapall('<div class="wrapper" />'); }); 

current output:

<div class="main">      <div class="wrapper">       <p><strong><span class="hdr">heading #1</span></strong></p>       <p>some paragraph text</p>       <p>some paragraph text</p>       <p>some paragraph text</p>       <p>some paragraph text</p>       <div class="wrapper">         <p><strong><span class="hdr">heading #2</span></strong></p>         <p>some paragraph text</p>         <p>some paragraph text</p>         <div class="wrapper">           <p><strong><span class="hdr">heading #3</span></strong></p>           <p>some paragraph text</p>           <p>some paragraph text</p>           <p>some paragraph text</p>           <p>some paragraph text</p>           <p>some paragraph text</p>         </div>       </div>     </div>  </div> 

desired output:

<div class="main">      <div class="wrapper">       <p><strong><span class="hdr">heading #1</span></strong></p>       <p>some paragraph text</p>       <p>some paragraph text</p>       <p>some paragraph text</p>       <p>some paragraph text</p>     </div>      <div class="wrapper">       <p><strong><span class="hdr">heading #2</span></strong></p>       <p>some paragraph text</p>       <p>some paragraph text</p>     </div>      <div class="wrapper">       <p><strong><span class="hdr">heading #3</span></strong></p>       <p>some paragraph text</p>       <p>some paragraph text</p>       <p>some paragraph text</p>       <p>some paragraph text</p>       <p>some paragraph text</p>     </div>  </div> 

jsfiddle: http://jsfiddle.net/pqn9kohu/7/

something this, passing in selection nextuntil, or p:has(.hdr) work, instead of $(this)

var elems = $('.main p:has(.hdr)');  elems.each(function() {     $(this).nextuntil(elems).addback().wrapall('<div class="wrapper" />'); }); 

fiddle