Итак, это мой создатель форм, который будет использоваться для создания форм в django. По сути, это динамически генерируемый django "FormView". Итак, теперь проблема в том, что когда пользователь удалит вопрос из пользовательского интерфейса, нумерация вопросов не изменится автоматически. Мне нужны эти нумерации, потому что на бэкэнде они будут использоваться django для создания формы путем сопоставления полученных данных с реальными моделями. CharField и другими соответствующими полями. Может кто подскажет, какой подход можно использовать? Для тех, кто не знает / использует django изображения, это должно хорошо объясняться.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Builder</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<style>
body{width:90vw;
display:flex;
flex-direction: column;
justify-items: space-between;
align-items: center;
}
.form-choice__dropdown{
display: flex;
justify-items: space-between;
}
</style>
<div class="form__heading">
<h1 class="heading-main">
<input type="text" placeholder="Enter form heading...">
</h1>
</div>
<div class="form-choice__dropdown">
<div class="form-type1">
<label for="form-type1__select">
<select name="form-type1__select" id="">
<option value="Project Request">Project Request</option>
<option value="ToT Request">ToT Request</option>
<option value="NDA Request">NDA Request</option>
<option value="MoU Request">MoU Request</option>
<option value="Tech Service Request">Tech Service Request</option>
</select>
</label>
</div>
<div class="form-type2">
<label for="form-type2__select">
<select name="form-type1__select" id="">
<option value="National">National</option>
<option value="International">International</option>
</select>
</label>
</div>
<div class="form-type3">
<label for="form-type1__select">
<select name="form-type1__select" id="">
<option value="Sponsored">Sponsored</option>
<option value="Collaborative">Collaborative</option>
<option value="Consultancy">Consultancy</option>
</select>
</label>
</div>
</div>
<div id="question-answer-pairs" class="question-answer-pairs">
<button id="add-question">Add Question</button>
</div>
<script>
window.removeQuestion = function (el) {
el.parentNode.parentNode.removeChild(el.parentNode);
}
const putRadioOptions = function () {
this.insertAdjacentElement("afterbegin",
`<input type='text' placeholder="Enter comma separated options(Do not use comma in any option) ">`
)
}
var questionNumber = 1;
var questionList
document.getElementById("add-question").addEventListener('click', function (event) {
let addQuestionButton = event.currentTarget;
let questionAnswerPair = `
<fieldset>
<legend class="question${questionNumber}__question">
Put in the Question${questionNumber}
<input type="text" >
</legend>
<label for="answer${questionNumber}-type">
Choose type of answer field:
<select name="answer${questionNumber}-type" class="question${questionNumber}__answer">
<option value="email">Email </option>
<option value="tel">Telephone</option>
<option value="file">File Upload</option>
<option value="radio" onclick="putRadioOptions()">Radio Buttons</option>
<option value="sex">Sex</option>
<option value="url">Range</option>
<option value="date">Date</option>
</select>
</label>
<button onclick="removeQuestion(this)">Remove</button>
</fieldset>
`
addQuestionButton.insertAdjacentHTML("beforebegin", questionAnswerPair);
++questionNumber;
}
)
</script>
</body>
</html>
Вот и все 
After removing Question2
I don't just need to change the text, that's easy. The problem is that the name= question${questionNumber} should too change to 2 when I remove the 2nd question for question number 3. So I want to see this with numbers in all those classes and names and ids automatically numbered consecutively.
enter image description here
javascript python django
введите описание изображения здесь