JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="myTextArea" placeholder="Type here, then click the button to update the div">
<!DOCTYPE html>
<html>
<head>
  <title>Twitter Bootstrap : Collapsible Accordion</title>
<link rel="stylesheet"
      href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link rel="stylesheet"
     href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
</head>

<style>
.DemoBS2{
    margin:20px;
}

</style>
<body>
<div class="DemoBS2">
<div class="panel-group" id="accordion">
      <div class="panel panel-primary">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion"
                href="#accordionOne">
              Collapsible Accordion 1
            </a>
          </h4>
        </div>
        <div id="accordionOne" class="panel-collapse collapse in">
          <div class="panel-body">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat
            </div>
        </div>
      </div>
      <div class="panel panel-success">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion"
               href="#accordionTwo">
              Collapsible Accordion 2
            </a>
          </h4>
        </div>
        <div id="accordionTwo" class="panel-collapse collapse">
          <div class="panel-body">
            Change does not roll in on the wheels of inevitability,
            but comes through continuous struggle.
            And so we must straighten our backs and work for
            our...

CSS

body{
          font-size: 11px;
          font-family: verdana;
        }

        #myDiv {
			border:solid 1px #999;
			border-radius:4px;
			min-height:300px;
            min-width:600px;
			margin-top:1em;
			padding:0.5em;
		}

		#myTextArea {
			min-width:600px;
			height: 200px;
		}
		
		#domTreeDiv {
            border: 1px solid #e2e2e2;
            border-radius: 3px 3px 3px 3px;
            min-height: 50px;
            max-height: 450px;
		}


        #domTreeDiv ul {
			list-style-type: none;
			padding: 0px 0px 0px 20px;
		}

		#domTreeDiv li > ul {
			display: none;
	
		}
		
		#domTreeDiv ul li > div {
			padding: 8px 8px 8px 8px;
			cursor: pointer;
			border: 1px solid transparent;
		}
		
		#domTreeDiv ul li > div:before {
			content:"";
		}		
		
		#domTreeDiv li > div:hover {
			padding: 8px 8px 8px 8px;
			cursor: pointer;
			border: 1px solid #BFDFFF;
			background-color: #99CCFF;
		}
		
		#domTreeDiv li > div > span {
			color: #8C0000;
		}			

		#domTreeDiv li > div > span.expander {
			color: #000000;
			display: inline-block;
			width: 24px;
			height: 100%;
			font-weight: bold;
		}	
		
		#domTreeDiv li > div > span.expander:hover {
			color: #EEEEEE;
		}	

        #attributeEditor{
          width: 400px;
          padding: 8px 8px 8px 8px;
          margin: 10px 0px 10px 0px;
        }

        #attributeSelector{
          width: 100px;
          padding: 8px 8px 8px 8px;
        }

JavaScript

function recursiveHTMLTraverser(html, el, trace)
	{
		var ulNode = document.createElement("ul");
		var html = html.children;
		var elementArray = [];
		for( var i = 0; i < html.length; ++i)
		{
			if (!elementArray[html[i].nodeName])
			{
				elementArray[html[i].nodeName] = [0];
			}
			else
			{
				elementArray[html[i].nodeName].push(elementArray[html[i].nodeName].length);
			}
			var liNode = document.createElement("li");
			var name = "";
			if (html[i].getAttribute("class") || html[i].getAttribute("id") || html[i].getAttribute("name"))
			{    
				name = " (<span>";
				if (html[i].getAttribute("id"))
				{
					name += html[i].getAttribute("id") + "</span>)";
				}
				else if (html[i].getAttribute("class"))
				{
					name += html[i].getAttribute("class") + "</span>)";
				}
				else
				{
					name += html[i].getAttribute("name") + "</span>)";
				}
			}
			var expander = "";
			if (html[i].children.length  > 0)
			{
				expander = "<span class='expander'>+</span>";
			}
			
			liNode.setAttribute("data-node", html[i].nodeName);
			liNode.setAttribute("data-trace", trace + html[i].nodeName);
			liNode.setAttribute("data-index", elementArray[html[i].nodeName].length-1);
			liNode.innerHTML = "<div>" + expander + html[i].nodeName + name + "</div>";
			ulNode.appendChild(liNode);
			if (html[i].children.length > 0)
			{
				recursiveHTMLTraverser(html[i], liNode, trace + html[i].nodeName + " | ");
			}

		}
		if (ulNode.children.length > 0)
		{
			el.appendChild(ulNode);
		}
	}
	
	function loadHTMLNode(e)
	{
		if (e.target && e.target.tagName)
		{
			if (e.target.tagName.toLowerCase == "li")
			{
				var source = e.target;
			}
			else if (e.target.className && e.target.className == "expander")
			{
				if (e.target.textContent == "+")
				{
					e.target.textContent = "-";
					e.target.parentElement.parentElement.querySelector("ul").style.display = "block";
				}
				else
				{
					e.target.textContent =...