JSFiddle - React, Tailwind, and code Playground

by FullMoon

HTML

<div id="depth1">
   depth1
   <div id="depth2">
     depth2
     <div id="depth3">
       depth3
     </div>
   </div>
 </div>
 <textarea name="" id="" cols="30" rows="10" style="width:100%;height:100px;"></textarea>

CSS

div{margin:5px;padding:5px;border:1px solid black}
 #depth1{background:darkgreen}
 #depth2{background:yellowgreen}
 #depth3{background:lightgreen}
 textarea{width:90%;height:200px}

JavaScript

var logger = document.getElementsByTagName('textarea')[0];
 
   function log(newtext) {
     logger.value+= newtext + '\n';
     logger.scrollTop = logger.scrollHeight;
   }
 
   var divs = document.getElementsByTagName('div');
 
   for (var i = 0; i < divs.length; i++) {
     (function(){
       var div = divs[i];
       div.onclick = function(e) {
         if (div.id === 'depth1') {
           log(div.id);
         } else if (div.id === 'depth2') {
           log(div.id);
         } else if (div.id === 'depth3') {
           log(div.id);
         }
       }
     })();
   }