JSFiddle - React, Tailwind, and code Playground

by black strings

HTML

<div id="main">  </div>

CSS

.p {width:100px; 
height:150px; 
border:thin solid grey; 
padding:5px;
display:inline-block;
vertical-align:top;
}

.mainWindow {width:95%; border:thin solid #ccc; padding:5px;}

.q {width:calc(100% - 12px); height:100px; border:thin solid green; display:inline-block; padding:5px;}

.qDisplay {    list-style-type: none;
    margin: 0px;
    padding: 1px;
    font-size:10px;
    font-family:courier;
    }
.qDisplay li{padding:5px;}
.qDisplay>li:nth-child(odd){
    background-color:#e8e8e8;
}

JavaScript

var s="nesting Q";

var mod = {};

mod.WFactory = {};
var WFactory = mod.WFactory;
WFactory.createDiv = function(className){
	return $div = $('<div>').addClass(className);
}
WFactory.createUl = function(className){
	return $('<ul>').addClass(className);
}
WFactory.createLi = function(contents, className){
	return $('<li>').append(contents).addClass(className);
}

mod.MainWindow = function(){
	this.$widget = WFactory.createDiv('mainWindow');
  this.pList = [];
};
var MainWindow = mod.MainWindow;
MainWindow.prototype.addP = function(p){
	this.pList.push(p);
  this.$widget.append(p.$widget);
}

mod.A = function(x,y){
	this.x = x;
  this.y = y;
  this.qList = [];
}
var A = mod.A;

mod.Q = function(qId, aId){
	this.qId = qId;
  this.aId = aId;
  this.name = "";
  this.qReq = [];
  this.complete = false;
  this.$widget = WFactory.createDiv('q');
  this.update();
}
var Q = mod.Q;
Q.prototype.update = function(){
	this.$widget.empty();
	var $ul = WFactory.createUl('qDisplay');
  $ul.append(WFactory.createLi('qId: '+this.qId));
  $ul.append(WFactory.createLi('aId: '+this.aId));
  $ul.append(WFactory.createLi('comp: '+this.complete));
  $ul.append(WFactory.createLi('name: '+this.name));
  this.$widget.append($ul);
}

mod.P = function(name){
	var me = this;
	this.name = name;
	this.qList = [];
  this.$widget = WFactory.createDiv('p');
  this.$widget.on('click', function(){
  	me.getQ();
  });
}
var P = mod.P;
P.prototype.getQ = function(){
	var qToClone = qPool[Utils.rand(0,qPool.length)];
  
  //use this method for clone basic obj without jquery
	//var clonedQ = (JSON.parse(JSON.stringify(qToClone)));
  
  //this this method for cloning objects with jquery in them
  var clonedQ = $.extend(true, {}, qToClone);
  this.qList.push(clonedQ);
	this.displayQ();
}
P.prototype.displayQ = function(){
	//console.log(this.qList);
 	var qWidget = this.qList[this.qList.length-1].$widget;
  var dup = qWidget.clone();
	this.$widget.html(dup);
}

mod.Utils = {};
var Utils =...