JSFiddle - React, Tailwind, and code Playground

by Jon-Carlos Rivera

HTML

<div class="livingstyleguide--container">
<h2>1</h2>
<div>something</div>
<h2>2</h2>
<div>something</div>
<span>something</span>
<h2>3</h2>
<div>something</div>
<div>something</div>
<div>something</div>
<h2>4</h2>
<div>something</div>
<div>something</div>
<div>something
    <p>nested</p></div>
<div>something<p>blue</p></div>
</div>
<div class="livingstyleguide--footer"></div>

CSS

.livingstyleguide--container {border: 1px solid black;}

JavaScript

function groupDomElements () {
  var headlines = document.querySelectorAll("h2");
  var footer = document.querySelector(".livingstyleguide--footer");
  var container = document.createDocumentFragment();

  for (var i = 0; i < headlines.length; i++) {
    var headline = headlines[i];
    var searchable = document.createElement("div");
    searchable.className = "searchable";

    container.appendChild(searchable);
    var elem;
    while ((elem = headline.nextElementSibling) && elem.tagName !== 'H2' && elem !== footer) {
        searchable.appendChild(elem);
    }
    
    searchable.insertBefore(headline, searchable.firstElementChild);
  }
  document.querySelector(".livingstyleguide--container").appendChild(container);

}

groupDomElements();