JSFiddle - React, Tailwind, and code Playground

by lonewolfs

HTML

<div><input type="text" id="1" value="One" tabindex="1" /></div>
<div><input type="text" id="2" value="Two" tabindex="2"/></div>
<div><textarea id="txt1" class="textarea" tabindex="3">Textarea One</textarea></div>
<div><input type="text" id="3" value="Three" tabindex="4"/></div>
<div><input type="text" id="4" value="Four" tabindex="5"/></div>
<div><textarea id="txt2" class="textarea" tabindex="6">Textarea Two</textarea></div>
<div><input type="text" id="5" value="Five" tabindex="7"/></div>

JavaScript

$(document).ready(function(){
    var tab1 = $('#txt1').attr('tabindex');
    var tab2 = $('#txt2').attr('tabindex');
    $('#txt1').live('focus click',function(){
        $('#txt2').attr('tabindex',101);
        $('#txt1').attr('tabindex',100);
    });
    $('#txt2').live('focus click',function(){
        $('#txt1').attr('tabindex',101);
        $('#txt2').attr('tabindex',100);
    });
    $('input').live('focus click',function(){
        $('#txt2').attr('tabindex',tab1);
        $('#txt1').attr('tabindex',tab2);
    });
});