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 class="listBullet">Item 1</div>
</div>

<pre></pre>

CSS

.wrapperDiv {
  border: 1px solid black;
}

pre {
  background: #eee;
}

JavaScript

var lb= [];
$('.container > *').each(function() {
  if($(this).hasClass('listBullet')) {
    lb.push(this);
  }
  else {
    $(lb).wrapAll("<div class='wrapperDiv'/>");
    lb= [];
  }
});
$(lb).wrapAll("<div class='wrapperDiv'/>");

//Output the HTML:
$('pre').html($('.container').html().replace(/</g,'\n&lt;').replace(/\n+/g,'\r'));