Django + Javascript – dynamic ModelForm generation issue

I have this code

{% extends 'base.html' %}

{% block content %}

<form method='POST'>

<script>
    function addMemberFnc() {
        document.getElementById("teamMemberDiv").innerHTML+={{ project_members_form }}
    }
</script>

    {{ project_form }}
    <p id="demo" onclick="addMemberFnc()">Add member.</p>
    <div style="border-style: dotted" id="teamMemberDiv">
{#        {{ project_members_form }}#}
    </div>
    <button type="submit" class="btn btn-primary my-5">Submit</button>
</form>

{% endblock %}

I would like to add project_member_form based on some action (it does not really matter now what action).

This is not working because it seems that JS is not able to see Python variable in <script> block.

Here is issue I’ve got:

EDIT:

I have got single form without any functions working without any issues. Here is my render method:

def project_generation(request):
    if request.method == 'POST':
        pass
    else:
        project_form = ProjectForm(prefix='Project')
        project_role_form = ProjectRoleForm(prefix='ProjectRole')
        project_members_form = ProjectMemberForm(prefix='ProjectMember')
        # logging.debug(project_form)
        # logging.debug(project_members_form)

        return render(request,
                      "project_xml_generation.html",
                      {
                          "project_form": project_form,
                          "project_members_form": project_members_form
                       },
                      )

>Solution :

You should use Template Literals.

try something like this

<script>
function addMemberFnc() {
    document.getElementById("teamMemberDiv").innerHTML+=`{{ project_members_form }}`
}