title: How to have multiple dynamic forms on the same page?
body: <p>I have multiple of the same inline formsets on the same page.  On other pages I already have a single formset with dynamic &quot;add&quot; and &quot;remove&quot; buttons.  However the javascript starts acting strange and I am unable to reuse variables among the different inline formsets.</p>
  <p>In order to have a single dynamic from I am using:</p>
  <pre><code>   &lt;script&gt;
      document.addEventListener('click', (event) =&gt; {
          if (event.target.id === &quot;add&quot;) {
              add_form(event)
          }
          if (event.target.id === &quot;remove&quot;) {
              remove_form(event)
          }
      })
  
      function add_form(event) {
          if (event) {
              event.preventDefault()
          }
          const totalNewForms = document.getElementById('id_form-TOTAL_FORMS')
          const currentForms = document.getElementsByClassName('form')
          const currentFormCount = currentForms.length // + 1
          const formCopyTarget = document.getElementById('formset')
          const copyEmptyFormEl = document.getElementById('empty-form').cloneNode(true)
          copyEmptyFormEl.setAttribute('class', 'form')
          copyEmptyFormEl.setAttribute('id', `form-${currentFormCount}`)
          const regex = new RegExp('__prefix__', 'g')
          copyEmptyFormEl.innerHTML = copyEmptyFormEl.innerHTML.replace(regex, currentFormCount)
          totalNewForms.setAttribute('value', currentFormCount + 1)
          // now add new empty form element to our html form
          formCopyTarget.append(copyEmptyFormEl)
      }
  
  
      function remove_form(event) {
          if (event) {
              event.preventDefault()
          }
          const totalNewForms = document.getElementById('id_form-TOTAL_FORMS')
          const currentForms = document.getElementsByClassName('form')
          const currentFormCount = currentForms.length
          //const regex = new RegExp(`id_form-${currentFormCount-1}`)
          const deleteFormTarget = document.getElementById(`form-${currentFormCount - 1}`)
          totalNewForms.setAttribute('value', currentFormCount - 1)
          deleteFormTarget.outerHTML = &quot;&quot;;
      }
  &lt;/script&gt;
  </code></pre>
  <p>I have attempted to create django context variables that are unique to each inline formset (all same parent model, different child model).  I am able to set the variables but when I try to use the variables the django template does not render the javascript value of the variable, it only renders the name of the context variable I set in the views.</p>
  <p>Example</p>
  <p>View:</p>
  <pre><code>def get_context_data(self, **kwargs):
      context = super(HXUpdateView, self).get_context_data(**kwargs)
      context['formset'] = InlineFormsetFactory(
          form_kwargs={'user': self.request.user}, instance=self.object, prefix=f&quot;{self.object.pk}-form&quot;)
  
      context['addButton'] = f&quot;add-{self.object.pk}&quot;
      context['total_forms_id'] = f&quot;id_{self.object.pk}-form-TOTAL_FORMS&quot;
      context['totalNewForms'] = f&quot;totalNewForms{self.object.pk}&quot;
      context['FormClass'] = f&quot;{self.object}class&quot;
      context['currentForms'] = f&quot;currentForms{self.object.pk}&quot;
      context['currentFormCount'] = f&quot;currentFormCount{self.object.pk}&quot;
      context['formCopyTarget'] = f&quot;formCopyTarget{self.object.pk}&quot;
      context['eFormsetId'] = f&quot;UpdateFormset{self.object.pk}&quot;
      context['copyEmptyFormEl'] = f&quot;copyEmptyFormEl{self.object.pk}&quot;
      context['emptyForm'] = f&quot;emptyForm{self.object.pk}&quot;
      context['regex'] = f&quot;regex{self.object.pk}&quot;
      context['removeButton'] = f&quot;removeButton{self.object.pk}&quot;
      context['deleteFormTargetId'] = f&quot;deleteFormTargetId{self.object.pk}&quot;
      context['deleteFormTarget'] = f&quot;deleteFormTarget{self.object.pk}&quot;
      context['one'] = 1
  
      return context
  </code></pre>
  <p>template javascript:</p>
  <pre><code>   &lt;script&gt;
          document.addEventListener('click', (event) =&gt; {
              if (event.target.id === &quot;{{ addButton }}&quot;) {
                  add_form(event)
              }
              if (event.target.id === &quot;{{ removeButton }}&quot;) {
                  remove_form(event)
              }
          })
  
          function add_form(event) {
              if (event) {
                  event.preventDefault()
              }
              const {{ totalNewForms }} = document.getElementById(&quot;{{ total_forms_id }}&quot;);
              const {{ currentForms }} = document.getElementsByClassName('{{ FormClass }}');
              const {{ currentFormCount }} = {{ currentForms }}.length;
              const {{ formCopyTarget }} = document.getElementById('{{ FormsetId }}');
              const {{ copyEmptyFormEl }} = document.getElementById('{{ emptyForm }}').cloneNode(true);
              {{ copyEmptyFormEl }}.setAttribute('class', '{{ FormClass }}');
              {{ copyEmptyFormEl }}.setAttribute('id', `form-{{ currentFormCount }}`);
              const {{ regex }} = new RegExp('__prefix__', 'g');
              {{ copyEmptyFormEl }}.innerHTML = {{ copyEmptyFormEl }}.innerHTML.replace({{ regex }}, {{ currentFormCount }});
              {{ totalNewForms }}.setAttribute('value', {{ currentFormCount }} + 1);
              {{ formCopyTarget }}.append({{ copyEmptyFormEl }});
              console.log({{ copyEmptyFormEl }});
          }
  
          function removeform(event) {
              if (event) {
                  event.preventDefault()
              }
              const {{ totalNewForms }} = document.getElementById('{{ total_forms_id }}');
              const {{ currentForms }} = document.getElementsByClassName('{{ FormClass }}');
              const {{ currentFormCount }} = {{ currentForms }}.length;
              //const regex = new RegExp(`id_form-${currentFormCount-1}`);
              const {{ deleteFormTarget }} = document.getElementById(`form-${currentFormCount - 1}`)
  
              console.log({{ deleteFormTarget }})
          }
      &lt;/script&gt;
  </code></pre>
  <p>Also if I try to render the javascript like this, for example:</p>
  <p>const {{ totalNewForms }} = document.getElementById(${{{ total_forms_id }}});</p>
  <p>I get this error message:</p>
  <p>django.template.exceptions.TemplateSyntaxError: Could not parse the remainder: '{ total_forms_id' from '{ total_forms_id'</p>