Динамическое использование select2 в наборе форм django
Мне удается успешно добавить несколько форм с помощью набора форм. Я использую select2 в части названия товара в форме. Но, как я упоминал ниже, я вручную ввожу идентификаторы формы.
$(document).ready(function() {
$('#id_store_house_id').select2();
$('#id_product_id').select2();
etc..
});
Но это не работает, потому что id формы меняется динамически каждый раз, когда я добавляю новую форму.
Я плохо разбираюсь в javascript. Я пробовал похожие темы и решения на stackoverflow, но безуспешно.
моя форма и java скрипт выглядят следующим образом :
форма :
<div class="row">
<div class="col-md-6 offset-md-3">
<h3 align="center">Add New Task</h3>
<hr>
<form id="form-container" method="POST">
{% csrf_token %}
{{user_task_form | crispy }}
{{ formset.management_form }}
{% for form in formset %}
<div class="tasksources-form">
{{form | crispy}}
</div>
{% endfor %}
<button id="add-form" class="btn btn-success">+Add More Product</button>
<br>
<br>
<button type="submit" class="btn btn-outline-info">Add New Task</button>
</form>
</div>
</div>
my js :
<script>
let tasksourcesForm = document.querySelectorAll(".tasksources-form")
let container = document.querySelector("#form-container")
let addButton = document.querySelector("#add-form")
let totalForms = document.querySelector("#id_form-TOTAL_FORMS")
let formNum = tasksourcesForm.length-1
addButton.addEventListener('click', addForm)
function addForm(e){
e.preventDefault()
let newForm = tasksourcesForm[0].cloneNode(true)
let formRegex = RegExp(`form-(\\d){1}-`,'g')
formNum++
newForm.innerHTML = newForm.innerHTML.replace(formRegex, `form-${formNum}-`)
container.insertBefore(newForm, addButton)
totalForms.setAttribute('value', `${formNum+1}`)
}
</script>
Спасибо за помощь.
Я пробовал следующее: Как мне использовать Django Dynamic Formset и Select2 вместе на одной странице?
Я не смог добиться успеха.