JSFiddle - React, Tailwind, and code Playground
HTML
Click the big box<br/>
<div id='inputBox' class='path1'></div>
<div id='pathToOut' class='path1'></div>
<div id='outputBox' class='path1'></div>
CSS
#inputBox {
width:50px;
height:50px;
border:3px solid darkgrey;
background-color:#eeeeee;
}
#pathToOut {
border:3px solid darkgrey;
width:100px;
height:0px;
position:relative;
top:-30px;
left:55px;
}
#outputBox {
width:30px;
height:30px;
border:3px solid darkgrey;
background-color:#eeeeee;
position:relative;
top:-52px;
left:150px;
}
JavaScript
function lightPath() {
// get class of clicked item
var itemClass = this.className; // eg. 'path1'
// get all elements with same class
var pathElems = document.body.getElementsByClassName('path1');
// go through each element and change its border color etc..
for(var x = 0; x < pathElems.length; x++) {
pathElems[x].style.borderColor = 'orange';
}
}
document.getElementById('inputBox').onclick = lightPath;