Dynamically add and remove TextBoxes using jQuery with values

• How to set Dynamically add and remove TextBoxes using jQuery with values in HTML / PHP / Web Development.
• Hope you know about bootstrap css as well jQuery. 
• Note :  add bootstrap css and jQuery link in your page before run this example.

      <div class="form-group">
      <label class="control-label col-md-3">Add Fields: </label>
      <div class="col-md-8">
          <input id="btnAdd" type="button" class="col-md-4 btn btn-info" value="Add Fields +" />
      </div>
      </div>

      <div id="TextBoxContainer"> </div>

      <div class="form-group">
        <label class="col-md-3 control-label">Show Values :</label>
        <div class="col-md-8">
         <input id="btnGet" type="button" value="Show Values" class="col-md-4 btn btn-success" />
          </div>
      </div>
                         
      <script type="text/javascript">
      $(function () {
          $("#btnAdd").bind("click", function () {
              var div = $("<div />");
              div.html(GetDynamicTextBox(""));
              $("#TextBoxContainer").append(div);
          });
          $("#btnGet").bind("click", function () {
              var values = "";
              $("input[name=DynamicTextBox]").each(function () {
                  values += $(this).val() + "\n";
              });
              alert(values);
          });
          $("body").on("click", "#removefield", function () {
              $(this).closest("div").remove();
          });
      });
      function GetDynamicTextBox(value) {
          return '<div class="form-group"><label class="control-label col-md-3"></label><div class="col-md-6"><input type="text" name="DynamicTextBox" value = "' + value + '" class="form-control ember-view ember-text-field" required="" ></div><input type="button" value="Remove" class="col-md-2 btn btn-danger" id="removefield"></div><br>'
      }
      </script>