Button to dynamically clone a form field I am very new to javascript and started with a very basic add button to my django app. Everything I found was using jQuery but for only one small script jQuery seems to be a too big overhead for me. Everything is working but I want to get some suggestions regarding coding style:

function hasReachedMaxNum(type) {
    var total = parseInt(document.querySelector("#" + type + "-TOTAL_FORMS").value);
    var max = parseInt(document.querySelector("#" + type + "-MAX_NUM_FORMS").value);
    return total &gt;= max
}

function cloneMore(element, type) {
    var total = parseInt(document.querySelector("#" + type + "-TOTAL_FORMS").value);
    newElement = element.cloneNode(true);
    for (var input of newElement.getElementsByTagName("input")) {
        input.name = input.name.replace("-" + (total - 1) + "-", "-" + total + "-");
        input.id = input.name;
        input.value = null;
    }
    for (var label of newElement.getElementsByTagName("label")) {
        var forElement = label.getAttribute("for");
        forElement = forElement.replace("-" + (total - 1) + "-", "-" + total + "-");
        label.setAttribute("for", forElement)
    }
    total += 1;
    element.parentNode.insertBefore(newElement, element.nextSibling);
    document.querySelector("#" + type + "-TOTAL_FORMS").value = total;
    return newElement
}
var addChoice = document.getElementById("add-choice");
addChoice.onclick = function() {
    var choices = document.getElementById("choices");
    cloneMore(choices.lastElementChild, "choice_set");
    if (hasReachedMaxNum("choice_set")) {
        this.disabled = true
    }
};


Just for reference the html looks like this:

&lt;ul id="choices"&gt;
  &lt;li&gt;
    &lt;label for="choice_set-0-choice_text"&gt;Choice:
    &lt;/label&gt;
    &lt;input id="choice_set-0-choice_text" maxlength="200" name="choice_set-0-choice_text" type="text" /&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;label for="choice_set-1-choice_text"&gt;Choice:
    &lt;/label&gt;
    &lt;input id="choice_set-1-choice_text" maxlength="200" name="choice_set-1-choice_text" type="text" /&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;label for="choice_set-2-choice_text"&gt;Choice:
    &lt;/label&gt;
    &lt;input id="choice_set-2-choice_text" maxlength="200" name="choice_set-2-choice_text" type="text" /&gt;
  &lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;
  &lt;button type="button" id="add-choice"&gt;Add another choice
  &lt;/button&gt;
&lt;/p&gt;
Combining the answers and work with the limitations of django the html now looks like this:

&lt;form id="create" method="post" action="/create/"&gt;
  &lt;input name="choice_set-TOTAL_FORMS" type="hidden" value="5" /&gt;
  &lt;input name="choice_set-INITIAL_FORMS" type="hidden" value="0" /&gt;
  &lt;input name="choice_set-MIN_NUM_FORMS" type="hidden" value="1" /&gt;
  &lt;input name="choice_set-MAX_NUM_FORMS" type="hidden" value="20" /&gt;
  &lt;ul id="choices"&gt;
    &lt;li&gt;
      &lt;label&gt;Choice:
        &lt;input maxlength="200" name="choice_set-0-choice_text" type="text" /&gt;
      &lt;/label&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;label&gt;Choice:
        &lt;input maxlength="200" name="choice_set-1-choice_text" type="text" /&gt;
      &lt;/label&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;label&gt;Choice:
        &lt;input maxlength="200" name="choice_set-2-choice_text" type="text" /&gt;
      &lt;/label&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;label&gt;Choice:
        &lt;input maxlength="200" name="choice_set-3-choice_text" type="text" /&gt;
      &lt;/label&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;label&gt;Choice:
        &lt;input maxlength="200" name="choice_set-4-choice_text" type="text" /&gt;
      &lt;/label&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;p&gt;
    &lt;button type="button" id="add-choice"&gt;Add another choice
    &lt;/button&gt;
  &lt;/p&gt;
  &lt;input type="submit" value="Create" /&gt;
&lt;/form&gt;


And the script like this:

function $(selector, element) {
    if (!element) {
        element = document
    }
    return element.querySelector(selector)
}

function $$(selector, element) {
    if (!element) {
        element = document
    }
    return element.querySelectorAll(selector)
}

function hasReachedMaxNum(type, form) {
    var total = parseInt(form.elements[type + "-TOTAL_FORMS"].value);
    var max = parseInt(form.elements[type + "-MAX_NUM_FORMS"].value);
    return total &gt;= max
}

function cloneMore(element, type, form) {
    var totalElement = form.elements[type + "-TOTAL_FORMS"];
    total = parseInt(totalElement.value);
    newElement = element.cloneNode(true);
    for (var input of $$("input", newElement)) {
        input.name = input.name.replace("-" + (total - 1) + "-", "-" + total + "-");
        input.value = null
    }
    total++;
    element.parentNode.insertBefore(newElement, element.nextSibling);
    totalElement.value = total;
    return newElement
}
var addChoiceButton = $("#add-choice");
addChoiceButton.onclick = function() {
    var choices = $("#choices");
    var createForm = $("#create");
    cloneMore(choices.lastElementChild, "choice_set", createForm);
    if (hasReachedMaxNum("choice_set", createForm)) {
        this.disabled = true
    }
};