<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@3.0.0" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
    <script data-require="jquery@1.8.3" data-semver="1.8.3" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Dynamic Form</h1>
    
    <div style="margin: 20px;">
      <button type="button" class="btn btn-default btn-lg">
        <span class="glyphicon glyphicon-import"></span> Add to form
      </button>
      
      <form id="dynamic-form"></form>
      <div id="alerts" style="margin-top: 20px;"></div>
      
    </div>
    
  </body>

</html>

// Code goes here

$(document).ready(function() {
  $('.btn').on('click', function(){
    
    var el = '<input type="hidden" name="point" value="tlt"></input>';
    $('#dynamic-form').append(el);
    
    var msg = '<div class="alert alert-success"><strong>Well done!</strong> Successfully add hidden input to form!</div>';
    $('#alerts').append(msg);
  });
  
});
/* Styles go here */