JSFiddle - React, Tailwind, and code Playground

HTML

<p>
<a href="" id="run-test">Run test</a>
</p>

<form>

<div class="data_field" id="data_field_one">

<label><input type="radio" name="one" value="" /> One</label>

</div>
<!-- .data_field -->


<div class="data_field" id="data_field_two">

<label><input type="radio" name="two" value="" /> Two</label>

</div>
<!-- .data_field -->

</form>


<ol id="event_log">

</ol>
<!-- #event_log -->

CSS

form .data_field {

  margin: 1em 0;

  padding: 0.5em 0;

}


form .data_field.focused {

  background-color: #99CCFF;

}

JavaScript

$( document ).ready( function () {

  $( "form input" ).bind( 'focus blur', function ( event ) {

    var toggle = { 'focus' : true, 'blur' : false }[ event.type ];

    var data_field = $( event.currentTarget ).closest( ".data_field" );

    data_field.toggleClass( 'focused', toggle );

    $( "#event_log" ).append( "<li>" + event.type + " : " + data_field[0].id + "</li>" );


    return;

  } );
    
  
  $( "#run-test" ).click( function ( event ) {

    event.preventDefault();

    $( "form input" ).eq( 0 ).focus();

    $( "form input" ).eq( 1 ).focus();      

  } );


  return;

} );