JSFiddle - React, Tailwind, and code Playground

by SpAm

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<div class="padded">
    dfgdfg
<input />
<input />
</div>
<div class="padded hidden">
    df234234
<input />
<input />
</div>
<a href="sdfd">sdf</a>

CSS

.padded {
    padding:20px;
}

.foo {
    background-color:red;
}

JavaScript

$(document).on('blur','.padded input:visible:eq(0)',function(){
    var ele = $(this);
    setTimeout(function(){
    if($(':focus').length > 0 && $(':focus').closest('.padded').get(0) ==ele.closest('.padded').get(0)) {
    }
       else {
    	console.log("Back");
        ele.closest('.padded').toggleClass("hidden");
        ele.closest('.padded').prev().toggleClass('hidden');
        ele.closest('.padded').prev().find('input:visible:last').focus();
       }
    }, 1);
    
});

$(document).on('blur','.padded input:visible:last',function(){
    var ele = $(this);
    setTimeout(function(){
    
    if($(':focus').length > 0 && $(':focus').closest('.padded').get(0) == ele.closest('.padded').get(0)) {
    }
    else {
    	console.log("Forward");
        ele.closest('.padded').toggleClass("hidden");
        ele.closest('.padded').next().toggleClass('hidden');
        ele.closest('.padded').next().find('input:visible:last').focus();
    }
    }, 1);
});