Добавление уникального id к новой динамически создаваемой форме с помощью django htmx

Я пытаюсь создать динамическую форму, в которой пользователь может создать столько вопросов, сколько он хочет, и в то же время добавить ответы на каждый вопрос, сколько он хочет (максимальное количество ответов - 4). Я использую htmx для добавления новых вопросов и ответов. Я могу добавлять больше вопросов при нажатии на кнопку "Добавить вопрос" и больше ответов при нажатии на кнопку "Добавить ответ". Однако, когда я пытаюсь добавить больше ответов на вопрос 2 или 3, добавляется новая форма ответа только на вопрос 1. Я хочу, чтобы ответы были добавлены в соответствующие вопросы. Помогите мне с этой проблемой.

add_quiz_questions.html

{% load crispy_forms_tags %}
<div class="container-fluid">
  <!-- Main Content Here -->
  <form method="POST" enctype="multipart/form-data">
    <div class="card shadow mb-4">
        <!-- <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary ">Post Your Announcements</h6>
        </div> -->
        <div class="card-body">
            {% csrf_token %}
            {{ questionform.question|as_crispy_field}}
            <div>
              {{ answerform.answer|as_crispy_field}}
              {{ answerform.correct_answer|as_crispy_field}}
              <div id="addanswer"></div>
            </div>
            <button hx-get="{% url 'add_quiz_answer' %}" hx-swap="beforeend" hx-target="#addanswer" class="btn btn-info">Add Answer</button>
            <button type="submit" class="btn btn-primary">Save</button>
        </div>
        <div id="addquestion"></div>
    </div>
    <button hx-get="{% url 'add_quiz_question' %}" hx-swap="beforeend" style="margin-bottom:30px" hx-target="#addquestion" class="btn btn-info"> Add Question</button>
  </form>
</div>

create_question.html

{% load crispy_forms_tags %}

{% csrf_token %}

<div class="card shadow mb-4">
    <!-- <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary ">Post Your Announcements</h6>
    </div> -->
    <div class="card-body">
        {% csrf_token %}
        {{ questionform.question|as_crispy_field}}
        <div>
          {{ answerform.answer|as_crispy_field}}
          {{ answerform.correct_answer|as_crispy_field}}
          <div id="addanswer1"></div>
        </div>
        <button hx-get="{% url 'add_quiz_answer' %}" hx-swap="afterend" hx-target="#addanswer1" class="btn btn-info">Add Answer</button>
        <button type="submit" class="btn btn-primary">Save</button>
    </div>
</div>

create_answer.html

<div>
{{ answerform.answer|as_crispy_field}}
{{ answerform.correct_answer|as_crispy_field}}

views.py

def addQuizQuestion(request):
questionform = QuizQuestionForm()
answerform = QuizAnswerForm()
context = {'questionform':questionform, 'answerform':answerform }
return render(request, 'assessments/partials/create_question.html', context)

def addQuizAnswer(request):
    answerform = QuizAnswerForm()
    context = {'answerform':answerform}
    return render(request, 'assessments/partials/create_answer.html', context)

  <button hx-get="{% url 'add_quiz_answer' %}" hx-swap="beforebegin" hx-target="this" class="btn btn-info">Add Answer</button>