JSFiddle - React, Tailwind, and code Playground

by XarX

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.js"></script>
<table border="1px black solid">
<tr>
  <td><div class="section" id="character_class">
    <div class="button red section2" id="character_class_div">
      Klasse
    </div>
  </div></td>
</tr><tr><td>
  <div class="section" id="character_race">
    <div class="button red section2" id="character_race_div">
      Volk
    </div>
  </div></td>
</tr><tr><td>
  <div  class="section" id="character_level">
    <div class="button red section2" id="character_level_div">
      Stufe
    </div>
</div>
  </div></td>
</tr><tr><td>
  <div  class="section" id="character_feature">
    <div class="button red section2" id="character_feature_div">
      Talent
    </div>
  </div></td>
</tr>
</table>

CSS

body {
  text-align: center;
  padding: 40px;
  background: #F5F5F5;
}

.container {
  width: 500px;
  text-align: center;
  margin: auto;
}

.copyright {
  margin-top: 50px;
  font-size: 8px;
  text-transform: uppercase;
}

.copyright a {
  text-decoration: none;
  padding: 5px;
  background: #c0392b;
  color: #FFFFFF;
}

.copyright a:hover {
  background: transparent;
  color: #c0392b;
}

.button {
  display: inline-block;
  height: 30px;
  width: 75px;
  line-height: 30px;
  padding-right: 10px;
  padding-left: 50px;
  position: relative;
  background-color: rgb(41, 127, 184);
  color: rgb(255, 255, 255);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 15px;


  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
  -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true)";
  zoom: 1;
  filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=1, Color=#ff123852, Positive=true);

  -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true)";
  filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=2, Color=#33000000, Positive=true);
}

.button span {
  position: absolute;
  left: 0;
  width: 30px;
  background-color: rgba(0, 0, 0, 0.5);

  -webkit-border-top-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-bottomleft: 5px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-right: 1px solid rgba(0, 0, 0, 0.15);
}

.button:hover span,
.button.active span {
  background-color: rgb(0, 102, 26);
  border-right: 1px solid rgba(0, 0, 0, 0.3);
}

.button:active {
  margin-top: 2px;
  margin-bottom: 13px;

 ...

JavaScript

var bars = ["character_class","character_race","character_feature"];
var character_classes = ["class0","class1","class2"];
var character_races = ["race0","race1","race2","race3",];
var character_level = 10;
var character_feature = ["feature0","feature1","feature2","feature3","feature4"];
var content = [character_classes,character_races,character_level,character_feature];

for (var bar=0;bar<bars.length; bar++) {
	var hudbar = document.getElementById(bars[bar]);
  for (var i=0; i<content[bar].length; i++) {
  	hudbar.innerHTML+="<a href=\"#\" class=\"button\" id=\"" + (bars[bar] + i) + "\" onclick=\"toggleActive.call(this)\"><span>✓</span>" + content[bar][i] + "</a>\n";
	}
}
var hudbar = document.getElementById("character_level_dropdown");
/*for (var i=0;i<character_level;i++) {
	hudbar.innerHTML+="<a href=\"#\" id=\"character_level" + i + "\" onclick=\"toggleActive.call(this)\"><span>" + (i+1) + "</span></a>\n";
}*/
function toggleActive () {
	
  if (this.parentNode.id != "character_feature") {
  	console.log("Single Selection");
    var nodeList = this.parentNode.childNodes; 
    var array = Array.prototype.slice.call(nodeList);

    const myArray = []; // empty Array
    for (let i = 0; i < nodeList.length; i++) {
        const self = nodeList[i];
        myArray.push(self);
    }
    for (let i = 0; i < myArray.length; i++) {
        $(myArray[i]).removeClass('active');
    }
  } else console.log ("Multi Selection");
  $(this).toggleClass('active');
  
}