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>

    <div id="main" style="margin-left:20px; margin-top:30px">
      <div class="source" id="source_1">



        <div class="item2" id="item2_1_100" data-value="" data-code="" style="height:25px; width:25px" onclick="makevisible(id)">+
          <div class="subitem" id="subitem_1" onmouseleave="makeinvisible()">

            <div class="sub2item" id="sub2item_1">LR
              <div class="sub3item">

                <div class="sub4item" style="margin-left: 10px" data-value="4.5" data-code="LR" onmousedown="myFunction(this)"></div>
                <div class="sub4item" data-value="5.0" data-code="LR" onmousedown="myFunction(this)"></div>
                <div class="sub4item" data-value="5.5" data-code="LR" onmousedown="myFunction(this)"></div>
                <div class="sub4item" data-value="6.0" data-code="LR" onmousedown="myFunction(this)"></div>
              </div>
            </div>
          </div>
        </div>

        <div class="stairs" id="stairs_1" data-value="1.5" data-code="ST" style="height:80px; line-height:80px">ST</div>




        <div class="item2" id="item2_1_200" data-value="" data-code="" onclick="makevisible(id)">+
          <div class="subitem" id="subitem2_1" onmouseleave="makeinvisible()">

            <div class="sub2item" id="sub2item2_1">MB
              <div class="sub3item">
                <div class="sub4item" style="margin-left: 10px" data-value="2.5" data-code="MB" onmousedown="myFunction(this)"></div>
                <div class="sub4item" data-value="3.0" data-code="MB" onmousedown="myFunction(this)"></div>
                <div class="sub4item" data-value="3.5" data-code="MB" onmousedown="myFunction(this)"></div>
                <div class="sub4item" data-value="4.0" data-code="MB" onmousedown="myFunction(this)"></div>
              </div>
          ...

CSS

body {
  background: #0a0f37;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}

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

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



.empty {
  display:none;
}

.full {
  display:block;
}

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

}

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

}

.item:hover {
    color: #f00;

    border-color: #f00;

  background-image:
  linear-gradient(45deg, transparent 45%, #f00 50%, transparent 55%, transparent 100%);
  background-size: 8px 8px;
  background-position: 10px 6px;
}

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

.item2:hover {
  color: #0a0f37;
  background-color: #fff;
}




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



}

.sub2item {
  color: #fff;
  border-style: solid;
  border-color: #fff;
  border-width: 1px;

  margin-left: 53.5px;
  margin-right: 130px;

  text-align: center;
  border-radius: 20px;
  cursor:...

JavaScript

var coje = 100;
var pocetplusu = 2;
var LR = "no";
var MB = "no";

var BeforeStairs1NP = 0;
var AfterStairs1NP = 0;


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 alerta(id) {
  var necoc = document.getElementById(id);

  $(necoc).html("X");
}

function alerta2(id) {
  var necoc = document.getElementById(id);
  var necocjmeno = necoc.getAttribute('data-code');
  $(necoc).html(necocjmeno);
}

function myFunction(id) {



  var index = $(id.parentNode.parentNode.parentNode.parentNode).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_1");
  var el = document.getElementById("lol");




  var div = document.createElement("div");
  div.id = "room" + coje;
  div.className = "item";
  div.style.height = id.getAttribute('data-value') * 40 + "px";

  div.innerHTML = id.getAttribute('data-code');
  div.style.lineHeight = div.style.height;
  div.dataset.value = id.getAttribute('data-value');
  div.dataset.code = id.getAttribute('data-code');
  div.setAttribute("onmouseover", "alerta(id)");
  div.setAttribute("onmouseleave", "alerta2(id)");


  div.setAttribute("onclick", "makedelete(id)");



  var subdiv = document.createElement("div");
  subdiv.id = "subitem_1" + coje;
  subdiv.className = "subitem";
  subdiv.style.marginTop = -1 * id.getAttribute('data-value') * 40 + "px";

  var subsubdiv = document.createElement("div");
  subsubdiv.id = "olol" + coje;
  subsubdiv.className = "subroom";
  subsubdiv.setAttribute("onclick", "makedelete(id)");


  subdiv.appendChild(subsubdiv);



  div.appendChild(subdiv);





  var Item2 =...