JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pages" title="root">
    <div title="div1"></div>
    <div title="div2">
        <div title="div4">
            <div title="div6"></div>
            <div title="div7"></div>
        </div>
        <div title="div5"></div>
    </div>
    <div title="div3"></div>
</div>

JavaScript

/*
 recursive-iterator v1.1.1
 https://github.com/nervgh/recursive-iterator
*/
!function(a,b){"function"==typeof define&&define.amd?define("RecursiveIterator",[],function(){return a.RecursiveIterator=b()}):"object"==typeof exports?module.exports=b():a.RecursiveIterator=b()}(this,function(){"use strict";var a=function(a){if(Array.isArray(a)){for(var b=0,c=Array(a.length);b<a.length;b++)c[b]=a[b];return c}return Array.from(a)},b=function(a,b,c){b&&Object.defineProperties(a,b),c&&Object.defineProperties(a.prototype,c)},c=function(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")},d=function(){function d(b){var e=void 0===arguments[1]?0:arguments[1],f=void 0===arguments[2]?!1:arguments[2],g=void 0===arguments[3]?100:arguments[3];c(this,d),this.__bypassMode=e,this.__ignoreCircular=f,this.__maxDeep=g,this.__queue=[].concat(a(d.getChildNodes(b,[],0))),this.__node=d.getNode(),this.__cache=[b],this.__makeIterable()}return b(d,{getKeys:{value:function(a){var b=Object.keys(a).sort();return!Array.isArray(a)&&d.isArrayLike(a)&&(b=b.filter(function(a){return Math.floor(Number(a))==a})),b},writable:!0,configurable:!0},isObject:{value:function(a){return a instanceof Object},writable:!0,configurable:!0},isWindow:{value:function(a){return a===a.window},writable:!0,configurable:!0},isArrayLike:{value:function(a){return!d.isWindow(a)&&a.hasOwnProperty("length")},writable:!0,configurable:!0},getChildNodes:{value:function(a,b,c){return d.getKeys(a).map(function(e){return d.getNode(a,a[e],e,b.concat(e),c+1)})},writable:!0,configurable:!0},getNode:{value:function(a,b,c){var d=void 0===arguments[3]?[]:arguments[3],e=void 0===arguments[4]?0:arguments[4];return{parent:a,node:b,key:c,path:d,deep:e}},writable:!0,configurable:!0}},{next:{value:function(){var b=this.__node||{},c=b.parent,e=b.node,f=b.key,g=b.path,h=b.deep;if(this.__maxDeep>h&&d.isObject(e))if(this.isCircular(e)){if(!this.__ignoreCircular)throw new Error("Circular reference")}else...