JSFiddle - React, Tailwind, and code Playground

HTML

<span class="TABlink" id="btn1">Button 1</span>
<span class="TABlink" id="btn2">Button 2</span>
<span class="TABlink" id="btn3">Button 3</span>
<span class="TABlink" id="btn4">Button 4</span>

<img src="http://ar.3dmadness.de/festo_footprint/de/html/buttons/fluidic1.png" id="button_1" class="TABlink"
 	style="
 	position:absolute; 
 	left:140px; 
 	bottom:200px; 
 	width:44px; 
 	height:44px;"
/>

CSS

.TABlink {
    border: solid 1px #666;
    padding: 4px;
    cursor: pointer;
}

.TABselected {
    border: solid 1px #333;
    background-color: #777;
}

JavaScript

//bind each 'button' so that on click, it is styled to be 'selected'
$('.TABlink').click(function(){select($(this))});

//Applies the selected style to the element
function select(el){
    deselectAll();
    $(el).addClass('TABselected');
}

function deselectAll(){
    $('.TABlink').removeClass('TABselected');
}