title: Add row dynamically in django formset
body: <p>In my django app I have two models i.e <code>Player</code> and <code>Team</code> which are connected by many to many relationship. To add the data dynamically in my tables I want to use javascript to add <code>Add row</code> or <code>Remove Row</code> button in my forms but unable to do so.</p>
  <p>Here are the details:</p>
  <p>Models.py</p>
  <pre><code>class Player(models.Model):
      pname = models.CharField(max_length=50)
      hscore = models.IntegerField()
      age = models.IntegerField()
  
      def __str__(self):
         return self.pname
  
  class Team(models.Model):
      tname = models.CharField(max_length=100)
      player= models.ManyToManyField(Player)
  
      def __str__(self):
          return self.tname
  </code></pre>
  <p>Forms.py</p>
  <pre><code>class PlayerForm(forms.Form):
      pname = forms.CharField()
      hscore= forms.IntegerField()
      age = forms.IntegerField()
  
  PlayerFormset= formset_factory(PlayerForm)
  
  class TeamForm(forms.Form):
     tname= forms.CharField()
     player= PlayerFormset()
  </code></pre>
  <p>Views.py</p>
  <pre><code>def post(request):
  
     if request.POST:
          form = TeamForm(request.POST)
          form.player_instances = PlayerFormset(request.POST)
          if form.is_valid():
              team= Team()
              team.tname= form.cleaned_data['tname']
              team.save()
  
          if form.player_instances.cleaned_data is not None:
  
              for item in form.player_instances.cleaned_data:
                  player = Player()
                  player.pname= item['pname']
                  player.hscore= item['hscore']
                  player.age= item['age']
                  player.save()
                  team.player.add(player)
              team.save()
  
     else:
          form = TeamForm()
          return render(request, 'new.html', {'form':form})
  </code></pre>
  <p>new.html</p>
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  
      &lt;title&gt;gffdfdf&lt;/title&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css&quot;&gt;
  
      &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;/static/jquery.formset.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class=&quot;container&quot;&gt;
  
      &lt;form id=&quot;myForm&quot; action=&quot;&quot; method=&quot;post&quot; class=&quot;&quot;&gt;
          {% csrf_token %}
          &lt;h2&gt; Team&lt;/h2&gt;
          {% for field in form %}
              {{ field.errors }}
              {{ field.label_tag }} : {{ field }}
          {% endfor %}
          {{ form.player.management_form }}
  
          &lt;h3&gt; Product Instance(s)&lt;/h3&gt;
          &lt;table id=&quot;table-product&quot; class=&quot;table&quot;&gt;
              &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;player name&lt;/th&gt;
                  &lt;th&gt;highest score&lt;/th&gt;
                  &lt;th&gt;age&lt;/th&gt;
              &lt;/tr&gt;
  
              &lt;/thead&gt;
              {% for player in form.player %}
                  &lt;tbody class=&quot;player-instances&quot;&gt;
  
                  &lt;tr&gt;
                      &lt;td&gt;{{ player.pname }}&lt;/td&gt;
                      &lt;td&gt;{{ player.hscore }}&lt;/td&gt;
                      &lt;td&gt;{{ player.age }}&lt;/td&gt;
                  &lt;/tr&gt;
  
                  &lt;/tbody&gt;
              {% endfor %}
          &lt;/table&gt;
          &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;save&lt;/button&gt;
  
      &lt;/form&gt;
  &lt;/div&gt;
  &lt;script&gt;
      $(function () {
          $('#myForm tbody tr').formset();
      })
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>How can I use the javascript to add or delete the rows connected by many to many relationship ?</p>
  <p>The above code gives us the following:
  <a href="https://i.stack.imgur.com/vGQ7b.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vGQ7b.jpg" alt="" /></a></p>