[FIXED] Adding unique id to new dynamically created form using django htmx

Issue

I am trying to create a dynamic form where the user can create as many questions as they want and at the same time add answers to each questions as many as they want(max number of answer is 4). I am using htmx to add new question and answer. I am able to add more questions when clicking the 'Add Question' button and more answers when clicking the 'Add Answer' button. However, when i tried to add more answers on Question 2 or 3, it will add a new answer form in Question 1 only. I want the answer to be added to their respective questions. Do help me with this issue.

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)

Solution

I have found the solution. I change the div id of the answer to "this". And I just need to change the hx-swap to "beforebegin" and change the hx-target to this. Div id of adding answer should be change to "this" to

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

Answered By - Suraya Zulkifli