JSFiddle - React, Tailwind, and code Playground

by kairavthakar2016

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>Value</span>
    <input  />
  </div>
  <div class="inputSwitch">
    Last Name: <span> Value</span>
    <input  />
  </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();