JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
    
    <p><strong><span class="hdr">Heading #1</span></strong></p>
    <p>Some paragraph text</p>
    <p>Some paragraph text</p>
    <p>Some paragraph text</p>
    <p>Some paragraph text</p>
    
    <p><strong><span class="hdr">Heading #2</span></strong></p>
    <p>Some paragraph text</p>
    <p>Some paragraph text</p>
    
    <p><strong><span class="hdr">Heading #3</span></strong></p>
    <p>Some paragraph text</p>
    <p>Some paragraph text</p>
    <p>Some paragraph text</p>
    <p>Some paragraph text</p>
    <p>Some paragraph text</p>
    
</div>

CSS

.wrapper:nth-child(odd) {
    background: red;
}
.wrapper:nth-child(even) {
    background: blue;
}

JavaScript

var elems = $('.main p:has(.hdr)');

elems.each(function() {
    $(this).nextUntil(elems).addBack().wrapAll('<div class="wrapper" />');
});