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 
    {
    width: 400px;
    padding-left:10px;
    height: 40px;
    background: #bbb8b8;
    float: left;
    font-size:20px;
    cursor:pointer;
    }
.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

var selectedDiv = "";
var x = document.getElementsByClassName('optionsecoptions')
for (var i = 0; i < x.length; i++) {
    x[i].addEventListener("click", function(){
        
    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')
})