JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<p>Some Text</p>
<div class="listBullet">Item 1</div>
<div class="listBullet">Item 2</div>
<div class="listBullet">Item 3</div>
<p>Some More Text</p>
<div class="listBullet">Item 1</div>
<div class="listBullet">Item 2</div>
<div class="listBullet">Item 3</div>
<p>Some Other Text</p>
</div>
<pre></pre>
CSS
.wrapperDiv {
border: 1px solid black;
}
pre {
background: #eee;
}
JavaScript
$('p + .listBullet').each(function() {
$(this).nextUntil('p')
.addBack()
.wrapAll("<div class='wrapperDiv' />");
});
//Output the HTML:
$('pre').html($('.container').html().replace(/</g,'\n<').replace(/\n+/g,'\r'));