jQuery Validation Unobtrusive - Broken

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    
    <form id="exampleForm">
     <div>
        <label for="FirstName">First Name</label>
        <input type="text" class="form-control"
               id="FirstName" name="FirstName" 
               data-val="true" 
               data-val-required="First Name is required.">
        <span  class="field-validation-valid" 
               data-valmsg-for="FirstName" 
               data-valmsg-replace="true"></span>               
      </div>  
      <button id="add-name">Add Last Name</button>
      
      <input type="submit" value="Submit">
      
    </form>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.6/jquery.validate.unobtrusive.js"></script>
    <script src="script.js"></script>
  </body>
</html>

$("#add-name").click(function(e){
  e.preventDefault();
  $.ajax({
    url: "last-name.html",
    success: function(data, textStatus, jqXHR) {
      $("form div:first").append(data)
    }
  });  
});

input.input-validation-error {
border-color: red;
}

span.field-validation-error {
color: red;
}

[Original jQuery Validation Plugin](https://jqueryvalidation.org/documentation/)
[jQuery Validation Unobtrusive](https://github.com/aspnet/jquery-validation-unobtrusive)

<div>
  <label for="LastName">Last Name</label>
  <input type="text" class="form-control"
         id="LastName" name="LastName" 
         data-val="true" 
         data-val-required="Last Name is required.">
  <span  class="field-validation-valid" 
         data-valmsg-for="LastName" 
         data-valmsg-replace="true"></span>               
</div>