0
I know it is a little late to answer this but i found this unanswered and i thought i could contribute
There can be multiple solutions to this.
I can mention one which i believe will suit your need.
<!--This is the form for parents and Javascript inserts Dynamic Fields -->
<form id="parent_form" method="POST" action="{% url 'url_name' %}">
<input type="text" name="parent_name">
<input id="child_count" onchange="inject_child_details()"
type="number" name="number_of_children" min=0>
<div id="child_details">
enter code here
</div>
</form>
<script type="text/javascript" nonce="{{script_nonce}}">
function inject_child_details() {
var x = document.getElementById("child_count").value;
details_div = document.getElementById("child_details");
details_div.innerHTML = ''
for(var index = 1;index <= x;){
details_div.insertAdjacentHTML('beforeend','<input type="text" name="child'+index+'name" placeholder="Name of Child '+index+'">');
index = index +1;
}
}
</script>
The HTML to insert should be in a single line or should truncate with
'+
and next line should start with the above inverted
+'
Source:stackexchange.com