JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div data-item-type="dropdownlist" data-item-id="1" data-item-parent-id="0" data-item-name="dropdown1">-</div>
<div data-item-type="dropdownlist" data-item-id="2" data-item-parent-id="0" data-item-name="dropdown2">-</div>
<div data-item-type="panel" data-item-id="3" data-item-parent-id="0" data-item-name="panel1">
  <div class="padding-box">
    <div data-item-type="checkbox" data-item-id="4" data-item-parent-id="3" data-item-name="checkbox1">-</div>
    <div data-item-type="checkbox" data-item-id="5" data-item-parent-id="3" data-item-name="checkbox2">-</div>
    <div data-item-type="dropdownlist" data-item-id="6" data-item-parent-id="3" data-item-name="dropdown3">-</div>
  </div>
</div>

JavaScript

var sdb = (function() {
	'use strict';
  
  var sui = {};

  sui.get = function( selector, ) {
    if ( 'object' === typeof selector ) {
      this.el = ( selector[0] && selector[0] instanceof Element ) ? selector : [ selector ];
    } else if ( 'string' === typeof selector ) {
      this.el = document.querySelectorAll( sui.selectors( selector )  );
    }
    // Convert ElementList to Array.
    this.el = [...this.el];
    return this;
  };
  
  var _this = function( selector, parent ) {
    return new sui.get( selector, parent );
  };
  
  // PROTOTOTOTOTOTOTOTOTOTOTOTOTO...
  sui.get.prototype.each = function( callback ) {
    for ( var i = 0; i < this.el.length; i++ ) {
      var $this = this.el[i];
      var item = {
      	el: $this,
        type: $this.dataset.itemType,
        name: $this.dataset.itemName,
        id: $this.dataset.itemId,
        parentId: $this.dataset.itemParentId,
      };
      callback( item );
    }
    return this;
  };
  
  sui.get.prototype.find = function( selector, prefix ) {
    let found = [];
    sdb( this.el ).each( function( item ) {
      let elFound = item.el.querySelectorAll( (prefix||'') + (selector ? sui.selectors( selector ) : '[data-item-id]') );
      if ( elFound ) {
        found = found.concat( [...elFound] );
      }
    });
    found = found.length === 0 ? undefined : found;
    return new sui.get( found );
  };
  
  sui.get.prototype.children = function( selector ) {
  	var children = sdb( this.el ).find( selector, ':scope > .padding-box > ');
    return children;
  };
  
  sui.get.prototype.parent = function() {
    let parents = [];
    sdb( this.el ).each( function( item ) {
      let elFound = document.querySelector( '[data-item-id="'+ item.parentId +'"]' );
      if ( elFound ) {
      	var parentExists = false;
      	for ( var i=0; i < parents.length; i++ ) {
        	var parent = parents[i];
          if ( parent === elFound ) parentExists = true;
        }
				if ( !parentExists ) parents.push(...