JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  Click on a name to get the input, it will select the text so you can quickly replace it. You can also hit the tab key to get to the next input key or shift+tab to go to the previous.
</div>
<div class="inputs">
  <div class="inputSwitch">
    First Name: <span></span>
    <input value="John" />
  </div>
  <div class="inputSwitch">
    Last Name: <span></span>
    <input value="Doe" />
  </div>
</div>

CSS

.inputs {
  margin-top:25px;
}

JavaScript

var $inputSwitches = $(".inputSwitch"),
  $inputs = $inputSwitches.find("input"),
  $spans = $inputSwitches.find("span");
$spans.on("click", function() {
  var $this = $(this);
  $this.hide().siblings("input").show().focus().select();
}).each( function() {
	var $this = $(this);
  $this.text($this.siblings("input").val());
});
$inputs.on("blur", function() {
  var $this = $(this);
  $this.hide().siblings("span").text($this.val()).show();
}).on('keydown', function(e) {
  if (e.which == 9) {
    e.preventDefault();
    if (e.shiftKey) {
      $(this).blur().parent().prevAll($inputSwitches).first().find($spans).click();
    } else {
      $(this).blur().parent().nextAll($inputSwitches).first().find($spans).click();
    }
  }
}).hide();