JSFiddle - React, Tailwind, and code Playground

HTML

<div style="margin-top:10px;">
    <div class="optionsecoptions">
     Computers
   </div>
   <div class="optionsecoptions" style="top:151px;">
    Electronics
    </div>
     <div class="optionsecoptions" style="top:212px;">
     Mechanical
    </div>
     <div class="optionsecoptions" style="top:273px;">
      Electrical
      </div>
      </div>


<a href="#" id="confirmBtn"> Confirm </a>

CSS

.optionsecoptions 
    {
  background-color: #34caca;
  border: 0px;
  width: 100px;
  height: 40px;
  font-size: 150%;
    }
.optionsecoptions:hover,
    .optionsecoptions:active {
        background-color: #226fa3;
        transition: background-color 0.4s ease-in, border-color 0.4s ease-in;
        color:#ffffff;
    }


.selected{
        background-color: #226fa3;
        transition: background-color 0.4s ease-in, border-color 0.4s ease-in;
        color:#ffffff;    
}

JavaScript

debugger;
var selectedDiv = "";
var x = document.getElementsByClassName('optionsecoptions')
for (var i = 0; i < x.length; i++) {
    x[i].addEventListener("click", function(){
        debugger;
    var selectedEl = document.querySelector(".selected");
    if(selectedEl){
        selectedEl.classList.remove("selected");
    }
    this.classList.add("selected");
        
    }, false);;
}

document.getElementById('confirmBtn').addEventListener('click',function(){
    
    var selectedEl = document.querySelector(".selected");
    if(selectedEl)
        alert(selectedEl.innerText);    
    else
        alert('please choose an option')
})