JSFiddle - React, Tailwind, and code Playground

HTML

<div id="primary_layout">

<form id="players" action="#">

<div>
<input type="text" name="player[][name]" />
</div>
   

<div id="player_name">

Name:

<div id="name">
0 NULL
</div>

</div>
<!-- #player_name -->


<div id="blurs">

Blurs:

<div id="count">
0
</div>

</div>
<!-- #blurs -->

</form>

</div>
<!-- #primary_layout -->

CSS

body {

  background-color: #FFFFFF;

  color: #000000;

  font-family: "Verdana";

  font-size: 1em;

}


#primary_layout {

  width: 40em;

  margin: 0 auto;

}


#player_name,
#blurs {

  margin: 2em 0;

}


#blurs #count {

  text-align: center;

  width: 2em;

  font-size: 2em;

  padding: 0.5em;

  border: 1px solid #CCCCCC;

}

JavaScript

var player = { 'name' : "", 'change_events' : 0 };

var blurs = 0;


$( document ).ready( function () {

  $( "#players" ).submit( function ( event ) { event.preventDefault(); } );


  $( "#players input" ).change( function ( event ) {

    player.name = this.value;


    $( "#player_name #name" ).text( ++player.change_events + " " + player.name );

  } );


  $( "#players input" ).blur( function ( event ) {

    $( "#blurs #count" ).text( ++blurs );

  } );


  $( "#players input" ).keydown( function ( event ) {

    if ( event.which == 13 ) {

      this.blur();

    }
    // if

  } );


  return;

} );