JSFiddle - React, Tailwind, and code Playground

by Steve Wellens

HTML

<input type="button" value="Click Me!" onClick="Test();" />

<h3 class="heading">Heading 1</h3>
  <div>Content</div>
  <div>More content</div>
  <div>Even more content</div>
<h3 class="heading">Heading 2</h3>
  <div>Some content</div>
  <div>Some more content</div>
<h3 class="heading">Heading 3</h3>
  <div>Other content</div>
<a>this is a link</a>
<div>unrelated div</div>

CSS

.section
{
    background-color: yellow;
    border: 2px solid black;
    margin: 5px;
}

h3
{
    font-size:20px;
    font-weight:bold;    
}

JavaScript

function Test() 
{
    // $sections is a jQuery object and it will contain three elements,
    // the three divs that have the heading class
    var $sections = $('.heading');

    // use each to iterate over each of the three elements
    $sections.each(function() 
    {
        // $this is a jquery object containing the current element
        // being iterated: one of the three divs.
        var $this = $(this);

        // nextUntil gets all the following sibling elements until 
        // it reaches an element with class heading or an anchor element
        // andSelf adds in the source element (this) to the collection
        $this = $this.nextUntil('.heading, a').andSelf();

        // wrap the elements with a div
        $this.wrapAll('<div class="section" >');
    });
}