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>
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
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>