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

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