Hi all,

I know some basics of jQuery, but I have not been able to figure this one out with only the basics.  Suppose I have the following, a container div that has a number of h3 tags in it, each followed by miscellaneous other HTML:

<div id="container">
  <h3>Product Name</h3>
  <ul>
    <li>info</li>
    <li>more info</li>
  </ul>
  <p>More information, in a paragraph</p>

... any number of h3 combinations can occur here, I won't know this until the page is rendered and I can count them ...

  <h3>Another Product Name</h3>
  <ul>
    <li>info</li>
    <li>yet more info</li>
    <li>and even more info</li>
  </ul>
  <div>Here is a div that I'd like to select too</div>
</div>

After:
Within #container, I'd like to be able to select each h3 and whatever follows it up to the next h3, and then wrap it in a div, resulting in the following:

<div id="container">
  <div class="productBox">
    <h3>Product Name</h3>
    <ul>
      <li>info</li>
      <li>more info</li>
    </ul>
    <p>More information, in a paragraph</p>
  </div>

... any number of h3 combinations can occur here, I won't know this until the page is rendered and I can count them ...

  <div class="productBox">
      <h3>Another Product Name</h3>
      <ul>
        <li>info</li>
        <li>yet more info</li>
        <li>and even more info</li>
      </ul>
      <div>Here is a div that I'd like to select too</div>
    </div>
</div>

I can't seem to get anything working.  I figured that once I was able to wrap each group in its own div things would get a lot easier as far as moving these blocks around.

Thanks in advance for any guidance.