JSFiddle - React, Tailwind, and code Playground

by black strings

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<button id="showBtn">s</button>
<button id="mBtn">m</button>
<button id="dBtn">d</button>
<div id="main"></div>
<div id="main2"></div>
<div id="m"></div>

CSS

.c {
  width:50px; height:50px; display:inline-block;
  font-size:10px;
  font-family:'courier';
  border:thin solid white;
  padding:3px;
}
.mainWindow {border:thin solid #ccc; width:98%; padding:5px;}
.selected {border:medium dotted white; background-color:#2d2d2d;}
span.black {color:black;}

JavaScript

var s="C";

var mod = {};

mod.WFactory = {};
var WFactory = mod.WFactory;
WFactory.createCW = function(c, id, name, type, base){
	var me = c;
	var $w = $('<button class="btn-success btn-sm">')
  	.addClass('c')
    .on('click',function(){
    	if(!me.active){
        me.active = true;
        $(this).addClass("selected");
      }else{
      	me.active = false;
        $(this).removeClass("selected");
      }
    });
  
  $w.append('<div>').append(id).addClass('cId');
  
  var $typeDiv = $('<div>');
  var $span = $('<span>');
  if(name[0] === 'A'){
    $span.addClass('glyphicon glyphicon-star text-info');
  }else if(name[0] === 'B'){
  	$span.addClass('glyphicon glyphicon-cog text-info');
  }else if(name[0] === 'C'){
  	$span.addClass('glyphicon glyphicon-asterisk text-info');
  }
  $typeDiv.append($span);
  $w.append($typeDiv);
  
  $w.append('<div>').append(base).addClass('cBase')
  	.append('<span class="glyphicon glyphicon-heart text-primary">');
  return $w;
}

mod.C = function(id,name,type,base){
	var me = this;
	this.id = id;
  this.name = name;
  this.type = type;
  this.base = base;
  this.active = false;
  this.$widget = WFactory.createCW(this, this.id, this.name, this.type, this.base);
};
var C = mod.C;

mod.P = function(name){
	this.name = name;
	this.cList = [];
  this.sc = 0;
}
var P = mod.P;
P.prototype.removeActiveC = function(){
	var tempCList = [];
  
  //you can't really remove while looping
  //so use a 2nd array store the unactive
  //and reassign the unactive back after loop
  for(var i=0; i<this.cList.length; i++){
  	if(!this.cList[i].active){
    	tempCList.push( this.cList[i]);
      //this.cList.splice(i, 1);	//remove in javascript
    }
  }
  //put the unActive back to list
  this.cList = tempCList;
  
}

mod.PWindow = function(){
	this.$widget = $('<div>').addClass('mainWindow');
}
var PWindow = mod.PWindow;
PWindow.prototype.addC = function(c){
  this.$widget.append(c.$widget);
}
PWindow.prototype.update = function(cList){
	//do no...