jquery-django-inline-form demo

HTML

<script src="https://rawgit.com/jamstooks/jquery-django-inline-form/master/django-inline-form.js"></script>
<!-- https://github.com/jamstooks/jquery-django-inline-form -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"/> 

<h3>Management Form</h3>

Total: <input id="id_authors-TOTAL_FORMS" name="authors-TOTAL_FORMS" disabled="disabled" value="0" size="2" /> Initial: <input id="id_authors-INITIAL_FORMS" name="authors-INITIAL_FORMS" disabled="disabled" value="0" size="2" /> Min: <input id="id_authors-MIN_NUM_FORMS"
  name="authors-MIN_NUM_FORMS" disabled="disabled" value="0" size="2" /> Max: <input id="id_authors-MAX_NUM_FORMS" name="authors-MAX_NUM_FORMS" disabled="disabled" value="5" size="2" /><br><br>

<div id="authors-container">

</div>

<div>
  <button id="add-author" type="button">Add</button>
  <button id="authors-delete" type="button">Delete</button>
</div>

<label class="label" for="id_authors-222-name">Name:</label>
<input id="id_authors-222-name" maxlength="100" name="authors-222-name" type="text" />

<br> Telefone: <input type="text" class="telefone" />
<!-- the template -->
<script type="text/html" id="authors-template">
  <fieldset class="authors-fieldset-__prefix__" style="display: none;margin-bottom: 5px;">

    <label class="label" for="id_authors-__prefix__-name">Name:</label>
    <input id="id_authors-__prefix__-name" maxlength="100" name="authors-__prefix__-name" type="text" />

    <br>
    <label class="label" for="id_authors-__prefix__-tel">tel:</label>
    <input class="datefield" id="id_authors-__prefix__-tel" maxlength="254" name="authors-__prefix__-tel" type="tel" />

  </fieldset>
</script>

JavaScript

$('#add-author').djangoInlineFormAdd({
  prefix: "authors",
  formHeight: 50,
});

jQuery("input.telefone")
  .mask("(99) 9999-9999?9")
  .focusout(function(event) {
    var target, phone, element;
    target = (event.currentTarget) ? event.currentTarget : event.srcElement;
    phone = target.value.replace(/\D/g, '');
    element = $(target);
    element.unmask();
    if (phone.length > 10) {
      element.mask("(99) 99999-999?9");
    } else {
      element.mask("(99) 9999-9999?9");
    }
  });