JSFiddle - React, Tailwind, and code Playground

by skram

HTML

<div tabindex='1'>Div one</div>
<div tabindex='1'>Div two</div>
<div tabindex='1'>Div tree</div>
<div tabindex='1'>Div four</div>

CSS

div {
    height: 20px;
    width: 60%;
    border: solid 1px blue;
    text-align: center;
}
div:focus {
    border: solid 2px red;
    outline: none;
}

JavaScript

//initialize attr for all div
var activeDivAttr;

//remove this if you can set id attr for each div and then
//modify the code below to use id attr
$('div').each (function (index) {
    $(this).attr('divID', 'divID'+index);    
});


$('div').mousedown(function(e) {
    e.stopImmediatePropagation(); //stops event bubbling    
    
    
    if (activeDivAttr == $(this).attr('divID')) {
        this.focus();
    } else {
        e.preventDefault();  //stops default browser action (focus)
    }
    
    activeDivAttr= $(this).attr('divID');
}).focus(function() {
    activeDivAttr= $(this).attr('divID');
}).blur(function() {
    activeDivAttr= '';
});