Using jQuery UI Tag-it

HTML

<script src="https://rawgithub.com/aehlke/tag-it/master/js/tag-it.js"></script>
<link rel="stylesheet" href="http://aehlke.github.io/tag-it/css/jquery.tagit.css">
<div class="Container">
  <h3>User Form</h3>
  
  <p>Fill out details:</p>
  <button id="BtnFName" class="SrcButton">First name</button>
  <button id="BtnLName" class="SrcButton">Last name</button>
  <button id="BtnAge" class="SrcButton">Age</button> <br />

  <!-- Input Container -->
  <input id="InputFName" placeholder="First Name" />
  <input id="InputLName" placeholder="Second Name" />
  <input id="InputAge" placeholder="Age" />
  
  <!-- Next Button Container -->
  <br />
  <button id="BtnNext" class="BtnNext">Next</button>
</div>

JavaScript

$(document).ready(function() {
	// Hide the inputs
  $("#InputFName").hide();
  $("#InputLName").hide();
  $("#InputAge").hide();
  $("#BtnNext").prop("disabled", true);
  
  // When the user clicks the First name button
  $("#BtnFName").click(function() {
    $("#InputFName").show();
    $("#InputLName").hide();
    $("#InputAge").hide();
  });
  
 	// When the user clicks the Last name button
  $("#BtnLName").click(function() {
    $("#InputFName").hide();
    $("#InputLName").show();
    $("#InputAge").hide();
  });
  
  // When the user clicks the Age button
  $("#BtnAge").click(function() {
    $("#InputFName").hide();
    $("#InputLName").hide();
    $("#InputAge").show();
  });
});