JSFiddle - React, Tailwind, and code Playground

by Svetlana000

HTML

<div>
  <div class="btn btn1 source source-1">
     111
  </div>
  <div class="btn btn2 source source-2">
     222
  </div>
</div>
<div class="target target-1">
  <div class="item blue"></div>
   <div class="item red"></div>
   <div class="item yellow"></div>
</div>
<div class="target target-2">
  <div class="item blue"></div>
   <div class="item black"></div>
   <div class="item green"></div>
</div>

CSS

.btn{
  width: 100px;
  height: 100px;
  background: #018CB4;
  border-radius: 50%;
  cursor:pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
}
.btn1{
    z-index: 9;
    top: 60px;
    left: 30px;
    transition:1s;
    box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.8);

}
.btn2{
    top: 20px;
    left: 100px;
    transition:1s;
    background:red;
}

.btnActive1{  
    top: 20px;
    left: 100px;
    z-index: 10;
box-shadow:none;
}

.btnActive2{  
    top: 60px;
    left: 30px;
    z-index: 20;
    box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.8);
}
.hidden {
  display: none;
}
.target{
  margin-top: 200px;
}
.item{
  width: 50px;
  height:50px;
}
.blue{
  background:blue;
}
.red{
  background:red;
}
.yellow{
  background:yellow;
}
.black{
  background:black;
}
.green{
  background:green;
}

JavaScript

var HIDDEN_CLASS_NAME = 'hidden'
var TARGET_CLASS_NAME = 'target'
var SOURCE_CLASS_NAME = 'source'

var targetIdToShow = 1

function main() {
	var targets = getElements(TARGET_CLASS_NAME)
	var sources = getElements(SOURCE_CLASS_NAME)
	sources.forEach(function (sourceNode) {
		var sourceNodeId = extractId(sourceNode, SOURCE_CLASS_NAME)
		sourceNode.addEventListener('click', function () {
    	if(this.classList.contains("btn2")){
      	document.querySelector(".btn1").classList.add("btnActive1");
        document.querySelector(".btn2").classList.add("btnActive2");
      }else{      
      	document.querySelector(".btn1").classList.remove("btnActive1");
        document.querySelector(".btn2").classList.remove("btnActive2");
      }
			showTarget(targets, sourceNodeId)
		})
	})
	showTarget(targets, targetIdToShow)
}

function getElements(type) {
	return [].slice.call(document.querySelectorAll('.' + type)).sort(function (targetNode1, targetNode2) {
		var target1Num = extractId(targetNode1, TARGET_CLASS_NAME)
		var target2Num = extractId(targetNode2, TARGET_CLASS_NAME)
		return target1Num > target2Num
	})
}

function extractId(targetNode, baseClass) {
	var currentClassIndex = targetNode.classList.length
	while (currentClassIndex--) {
		var currentClass = targetNode.classList.item(currentClassIndex)
		var maybeIdNum = parseInt(currentClass.split('-')[1])
		if (isNaN(maybeIdNum)) {
			continue
		}
		var classStrinToValidate = baseClass + '-' + maybeIdNum
		if (classStrinToValidate === currentClass) {
			return maybeIdNum
		}
	}
}

function showTarget(targets, targetId) {
	targets.forEach(function (targetNode, targetIndex) {
    var currentTargetNodeId = extractId(targetNode, TARGET_CLASS_NAME)
		if (currentTargetNodeId === targetId) {
			targetNode.classList.remove(HIDDEN_CLASS_NAME)
		} else {
			targetNode.classList.add(HIDDEN_CLASS_NAME)
		}
	})
}

main()