Как сделать дополнительные подгружаемые поля в форме при нажатии на кнопку.
Например есть кнопка при нажатии на нее в форму добавляются новые поля, при двойном нажатии эти поля удаляются .
<form action="{$_modx->resource.id | url}" method="post" class="ajax_form form-horizontal well" style="max-width: 530px;">

	<div class="form-group">
		<label class="col-sm-4 control-label" for="af_name">Ваше имя</label>
		<div class="col-sm-8">
			<input type="text" id="af_name" name="name" value="" placeholder="" class="form-control" />
			<span class="error_name"></span>
		</div>
	</div>

	<div class="form-group">
		<label class="col-sm-4 control-label" for="af_phone">Телефон</label>
		<div class="col-sm-8">
			<input type="tel" id="af_phone" name="phone" value="" placeholder="" class="form-control" />
			<span class="error_phone"></span>
		</div>
	</div>

	

	<div class="form-group">
		<label class="col-sm-4 control-label" for="af_message">Ваш вопрос</label>
		<div class="col-sm-8">
			<textarea id="af_message" name="message"  required name="message" class="form-control" rows="5"></textarea>
			<span class="error_message"></span>
		</div>
	</div>

	<div class="agreement form-group">
        <input type="hidden" name="check[]" value="" />
        <div class="col-sm-offset-4 col-sm-8">
          <div class="checkbox">
            <label>
              <input type="checkbox" name="check[]"  required name="check[]" id="check" class="check" checked>
              Я даю свое согласие на обработку персональных данных
            </label>
          </div>
        </div>
        <span class="col-sm-offset-4 col-sm-8 error_check"></span>
	</div>

	<div class="form-group">
		<div class="col-sm-offset-4 col-sm-8">
			<button type="reset" class="btn btn-default">Отмена</button>
			<button type="submit" class="btn btn-primary">Отправить</button>
		</div>
	</div>
	
</form>