Dynamic form generalion and removal using meteor and Aldeed's autoform
<p>I am using meteor and Aldeed's autoform to populate my database.
The basic functionality I want to achieve is this:</p>

<ul>
<li>Have principal form linked to a collection as normal.</li>
<li>In the principal form, have a button <code>add secondary</code> which dynamically adds forms linked to a different collection.</li>
<li>The second form has a <code>remove</code> button which removes it.</li>
</ul>

<p>I followed the technique outlined <a href="https://stackoverflow.com/questions/29647992/adding-text-fields-dynamically-in-meteor-without-using-jquery">here</a> and put together the following code :</p>

<pre><code>        &lt;template name="PricipalForm"&gt;

        {{#autoForm collection="principal" id="Principalform" type="insert" }}
            &lt;fieldset&gt;
                &lt;legend&gt;Principal form&lt;/legend&gt;
                {{&gt; afQuickField name='field1'}}
                {{&gt; afQuickField name='field2'}}
                &lt;button id='add-inputs' type="button"&gt;
                        Add Proposal
                 &lt;/button&gt;

                 {{#each inputs}}
                        {{&gt; AddSecond}}
                 {{/each}}

            &lt;/fieldset&gt;
            &lt;button type="submit" class="btn btn-primary"&gt;Insert&lt;/button&gt;
        {{/autoForm}}
    &lt;/template&gt;

./Templates/PrincipalForm.html

//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////

Template.PrincipalForm.onCreated(function() {
   Session.set('props', []);
 });


  Template.Create.events({
     'click #add-inputs': function () {
      var inputs = Session.get('inputs');
      var uniqid = Math.floor(Math.random() * 100000); /
      inputs.push({uniqid: uniqid});
      Session.set('inputs', inputs);
      }
  });

  Template.Create.helpers({
      inputs: function(){
         return Session.get('inputs');
       }
   });


./Templates/PrincipalForm.js


 ////////////////////////////////////////////////////
 ///////////////////////////////////////////////////


 &lt;template name ="SecondaryFrom"&gt;

     {{#autoForm collection="secondary" id="secondaryForm" type="insert" }}
      &lt;fieldset&gt;
       &lt;legend&gt; One instance of secondary form &lt;/legend&gt;
          {{&gt; afQuickField name='fieldA'  }}
          {{&gt; afQuickField name='fieldB'}}
      &lt;/fieldset&gt;
      &lt;button class='remove-inputs' uniqid="{{uniqid}}" type="button"&gt;Remove&lt;/button&gt;
{{/autoForm}}

&lt;/template&gt;


  ./Templates/SecondaryForm.html

  //////////////////////////////////////////
  //////////////////////////////////////////

  Template.AddProposal.events({
     'click .remove-inputs': function(event) {
         var uniqid = $(event.currentTarget).attr('uniqid');
         var props = Session.get('inputs');
         props = _.filter(props, function(x) { return x.uniqid != uniqid; });
         Session.set('inputs', inputs);
          },

   });


  ./Templates/SecondaryForm.js
</code></pre>

<p>This code works fine, there is only one  bug that I do not understand:</p>

<ul>
<li>I first add 3 secondary forms and put the values <code>abc</code>  , <code>efg</code>  , <code>hij</code>  in <code>fieldA</code> of these three forms respectively.</li>
<li>Then I remove the second secondary form with <code>efg</code> and what I get is that the remaining ones are <code>abc</code> and <code>efg</code> !!</li>
<li>where it gets more weird is that when I check the <code>uniqid</code> of the removed form is the one expected (and corresponding to the previous <code>efg</code>).</li>
</ul>

<p>So it seems that when I remove the form dynamically, the values that I type in persist somehow.</p>

<p>Can anyone please help out:</p>

<ul>
<li>What goes wrong in what I am doing, how could I fix it? </li>
<li>Is there perhaps a better way to do what I am trying to do?</li>
</ul>

<p>I also tried to check the answer <a href="https://stackoverflow.com/questions/29061719/meteor-dynamic-input-fields?rq=1">here</a>
, but the links provided were broken.</p>

<p>Thanks</p>