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 >= 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:<ul id=choices>  <li>    <label for=choice_set-0-choice_text>Choice:    </label>    <input id=choice_set-0-choice_text maxlength=200 name=choice_set-0-choice_text type=text />  </li>  <li>    <label for=choice_set-1-choice_text>Choice:    </label>    <input id=choice_set-1-choice_text maxlength=200 name=choice_set-1-choice_text type=text />  </li>  <li>    <label for=choice_set-2-choice_text>Choice:    </label>    <input id=choice_set-2-choice_text maxlength=200 name=choice_set-2-choice_text type=text />  </li></ul><p>  <button type=button id=add-choice>Add another choice  </button></p>
Button to dynamically clone a form field
javascript;beginner;form;django
Combining the answers and work with the limitations of django the html now looks like this:<form id=create method=post action=/create/>  <input name=choice_set-TOTAL_FORMS type=hidden value=5 />  <input name=choice_set-INITIAL_FORMS type=hidden value=0 />  <input name=choice_set-MIN_NUM_FORMS type=hidden value=1 />  <input name=choice_set-MAX_NUM_FORMS type=hidden value=20 />  <ul id=choices>    <li>      <label>Choice:        <input maxlength=200 name=choice_set-0-choice_text type=text />      </label>    </li>    <li>      <label>Choice:        <input maxlength=200 name=choice_set-1-choice_text type=text />      </label>    </li>    <li>      <label>Choice:        <input maxlength=200 name=choice_set-2-choice_text type=text />      </label>    </li>    <li>      <label>Choice:        <input maxlength=200 name=choice_set-3-choice_text type=text />      </label>    </li>    <li>      <label>Choice:        <input maxlength=200 name=choice_set-4-choice_text type=text />      </label>    </li>  </ul>  <p>    <button type=button id=add-choice>Add another choice    </button>  </p>  <input type=submit value=Create /></form>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 >= 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    }};