JSFiddle - React, Tailwind, and code Playground

by MatyasSvejdik

HTML

<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>index demo</title>

    <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
  </head>

  <body>

    <body>
      <div id="main">
      </div>
      <div style="margin-left:20px; margin-top:30px">
        <div class="source" id="source">
          <div class="item" value="1.0" code="v10" style="height:150px"></div>

          <div class="item2" id="itemx100" style="height:25px; width:25px" onclick="makevisible(id)">+
            <div id="subitem" class="subitem" onmouseleave="makeinvisible()">
              <div class="subsubitem" id="xoxo" onmousedown="myFunction(this.parentNode.parentNode)"></div>
              <hr class="hr">
              <div class="subsubitem" id="xoxo" onmousedown="myFunction(this.parentNode.parentNode)"></div>
            </div>
          </div>

          <div class="item" id="stairs" value="1.5" code="v15" style="height:80px"></div>

          <!--
          <div class="item" id="stairs" value="1.5" code="v15" style="height:80px" onclick="makevisible(id)">
            <div id="subitem" class="subitem" onmouseleave="makeinvisible()">
              <div class="subroom" id="olol" onclick="makedelete(id)"></div>

            </div>
          </div>
-->

          <div class="item2" id="item200" style="height:25px; width:25px" onclick="makevisible(id)">+
            <div id="subitem2" class="subitem" onmouseleave="makeinvisible()">
              <div class="subsubitem" id="lol" onmousedown="myFunction(this.parentNode.parentNode)">D</div>
              <hr class="hr">
              <div class="subsubitem" id="lol" onmousedown="myFunction(this.parentNode.parentNode)">R</div>
            </div>
          </div>

          <div class="item" value="1.5" code="v15" style="height:100px"></div>




        </div>
        <div class="source">
          <div class="empty" value="1.0" code="v10" style="height:155px"></div>
          <div class="item2" style="height:25px;...

CSS

body {
  background: #0a0f37;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.source {
  float: left;
  width: 200px
}



.empty {}

.item {
  border-style: solid;
  border-color: #aaafd7;
  border-width: 1px;
  position: relative;
  text-align: center;
  border-radius: 20px;
  cursor: pointer;
  line-height: 29px;
  width: 40px;
  background-image:
    linear-gradient(45deg, transparent 45%, #919195 50%, transparent 55%, transparent 100%);
  background-size: 8px 8px;
  background-position: 10px 6px;

}

.item2 {
  background-color: #fff;
  position: relative;
  margin-top: -12.5px;
  margin-bottom: -12.5px;
  margin-left: 7.5px;
  border-radius: 12.5px;
  text-align: center;
  font-size: 25px;
  line-height: 25px;
  cursor: pointer;
  z-index: 99
}




.subitem {
  position: absolute;
  margin-top: -32.5px;
  display: none;

}

.subsubitem {
  border-style: solid;
  border-color: #fff;
  border-width: 1px;
  position: relative;

  margin-left: 53.5px;

  text-align: center;
  border-radius: 20px;
  cursor: pointer;
  line-height: 29px;
  width: 40px;
  height: 40px;
  background-color:#ffffff;
  background-size: 8px 8px;
  background-position: 10px 6px;

}

.hr {
  width:75%;
  text-align:right;
  margin-top:-23px;
  z-index:-100;
  position:absolute;
  border-top: 1px solid white
}

.subroom {
  border-style: solid;
  border-color: #f00;
  border-width: 1px;
  position: relative;

  margin-left: 53.5px;
  margin-top: 50px;
  text-align: center;
  border-radius: 20px;
  cursor: pointer;
  line-height: 29px;
  width: 40px;
  height: 40px;
  background-color:#f00;
  background-size: 8px 8px;
  background-position: 10px 6px;
}

JavaScript

var coje = 100;
var pocetplusu = 1;
function test() {
	alert("jebat");
}

function makevisible(id) {


  var x = document.getElementById(id).getElementsByClassName("subitem")[0];

  x.style.display = "block";

}

function makeinvisible() {
  var i;
  for (i = 0; i < 20; i++) {
    var x = document.getElementsByClassName("subitem")[i];
    x.style.display = "none";
  }
}

function myFunction(id) {
	var index = $(id).index();
  var i;

for (i = 0; i < pocetplusu; i++) {
    var x = document.getElementsByClassName("subitem")[i];
    x.style.display = "none";
  }

	pocetplusu++;
  
  var list = document.getElementById("source");
  var el = document.getElementById("lol");




  var div = document.createElement("div");
  div.id = "room" + coje;
  div.className = "item";
  div.style.height = "100px";
  div.style.color = "red";
  div.innerHTML = coje + 1;
  div.setAttribute("onclick", "makevisible(id)");
  
  var subdiv =  document.createElement("div");
  subdiv.id = "subitem" + coje;
  subdiv.className = "subitem";
  subdiv.setAttribute("onmouseleave", "makeinvisible()");
  
  var subsubdiv =  document.createElement("div");
  subsubdiv.id = "olol" + coje;
  subsubdiv.className = "subroom";
  subsubdiv.style.marginTop = "30px";
  subsubdiv.setAttribute("onclick", "makedelete(id)");
  subdiv.appendChild(subsubdiv);
	div.appendChild(subdiv);

  var $add = $(id);


	coje++;
  
  var num = parseInt($add.prop("id").match(/\d+/g), 10) + 1;

  var $addClone = $add.clone().prop({'id': "item" + coje});


  var stairs = document.getElementById("stairs");
  var stindex = Array.from(list.children).indexOf(stairs);

  if (index < stindex) {
    list.insertBefore(div, list.childNodes[index + 3]);

    $($addClone).insertBefore(list.childNodes[index + 4]);

  } else {
    list.insertBefore(div, list.childNodes[index + 4]);

    $($addClone).insertBefore(list.childNodes[index + 4]);
  }
}


function makedelete(id) {
	 var neco = document.getElementById(id);
  ...