SSOwat/portal/edit.html

<form class="form-horizontal" role="form" method="POST" action="edit.html">
    <div class="form-group">
        <label for="uid" class="col-sm-3 control-label">Username</label>
        <div class="col-sm-9">
            <input type="text" name="uid" class="form-control" value="{{uid}}" disabled>
        </div>
    </div>
    <div class="form-group">
        <label for="givenName" class="col-sm-3 control-label">Fullname</label>
        <div class="clearfix visible-xs"></div>
        <div class="col-sm-4 col-xs-6">
            <input type="text" name="givenName" class="form-control" value="{{givenName}}" required>
        </div>
        <div class="col-sm-5 col-xs-6">
            <input type="text" name="sn" class="form-control" value="{{sn}}" required>
        </div>
    </div>
    <hr>
    <div class="form-group">
        <label for="mail" class="col-sm-3 control-label">Mail</label>
        <div class="col-sm-9">
            <input type="email" name="mail" class="form-control" value="{{mail}}" required>
        </div>
    </div>
    <hr>
    <div class="row">
    <div class="col-sm-3 text-right hidden-xs"><strong>Aliases</strong></div>
    <div class="col-sm-3 text-left visible-xs"><h4>Aliases</h4></div>
    <div class="col-sm-9">
    <blockquote>
    {{#mailalias}}
            <input type="email" name="mailalias[]" class="form-control" value="{{.}}">
            <br>
    {{/mailalias}}
            <input type="email" name="mailalias[]" class="form-control mailalias-input" placeholder="newalias@mydomain.org">
            <div class="text-center" style="display: none;" id="add-mailalias"><a class="btn btn-success"><strong>+</strong></a></div>
        <div class="clearfix"></div>
    </blockquote>
    </div>
    </div>
    <hr>
    <div class="row">
    <div class="col-sm-3 text-right hidden-xs"><strong>Forward</strong></div>
    <div class="col-sm-3 text-left visible-xs"><h4>Forward</h4></div>
    <div class="col-sm-9">
    <blockquote>
    {{#maildrop}}
            <input type="email" name="maildrop[]" class="form-control" value="{{.}}">
            <br>
    {{/maildrop}}
            <input type="email" name="maildrop[]" class="form-control maildrop-input" placeholder="newforward@myforeigndomain.org">
            <div class="text-center" style="display: none;" id="add-maildrop"><a class="btn btn-success"><strong>+</strong></a></div>
        <div class="clearfix"></div>
    </blockquote>
    </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-sm-6 text-center">
            <input type="submit" class="btn btn-lg btn-primary" value="OK">
        </div>
        <div class="visible-xs" style="height: 20px"></div>
        <div class="col-sm-6 text-center">
            <a href="info.html" class="btn btn-lg btn-default">Cancel</a>
        </div>
    </div>
</form>
<script type="text/javascript">
   $( document ).ready(function() {
      $("#add-mailalias").show();
      $("#add-maildrop").show();
      $(".mailalias-input").hide();
      $(".maildrop-input").hide();
      $("#add-mailalias a").on("click", function() {
          $("#add-mailalias").before($(".mailalias-input:first").clone().show());
          $("#add-mailalias").before("<br><br>");
      });
      $("#add-maildrop a").on("click", function() {
          $("#add-maildrop").before($(".maildrop-input:first").clone().show());
          $("#add-maildrop").before("<br><br>");
      });
   });
</script>