How to group elements with JQuery according to levels

December 4, 2021

I want to group the following html:

<h2>Summarize the problem<h2>
<h3>Include details about your goal<h3>
<h3>Include details about your goal<h3>
<h3>Include any error messages<h3>

<h2>Describe What you have tries<h2>
<h3>Show what you’ve tried and tell us what you found<h3>
<h3>Lorem Ipsum LOL<h3>

...

into


<div>
  <h2>Summarize the problem</h2>
  <h3>Include details about your goal</h3>
  <h3>Include details about your goal</h3>
  <h3>Include any error messages</h3>
</div>

<div>
   <h2>Describe What you have tries</h2>
   <h3>Show what you’ve tried and tell us what you found</h3>
   <h3>Lorem Ipsum LOL</h3>
</div>

What I have tried

I tried looping through all the elements, but never worked. Im not putting the code here as I found it is not even making any sense

>Solution :

Here is a working version.

$("h2").each(function() { 
  const $this = $(this)
  const $h3 = $this.nextUntil("h2"); // find all tags until next H2
  $this
    .wrap('<div class="wrapper" />')
    .after($h3)
})

.wrapper { border: 1px solid black }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Summarize the problem</h2>
<h3>Include details about your goal</h3>
<h3>Include details about your goal</h3>
<h3>Include any error messages</h3>

<h2>Describe what you have tried</h2>
<h3>Show what you've tried and tell us what you found</h3>
<h3>Lorem Ipsum LOL</h3>