title: Emberjs-1.0.0-rc.6 click to dynamically add more or multiple input fields
body: <p>I want to create a form where uses can click a button to add additional input fields. I have created a partialy working here <strong><a href="http://jsfiddle.net/EkJwA/" rel="nofollow">jsfidle</a></strong> and the entire code in the <strong>jsfiddle</strong> is pased below:</p>
  
  <p>I have 3 problems:</p>
  
  <ol>
  <li><p>This adds a textfield but is not using ember bindings <strong>$("#addField").append('<br/>')</strong>. When I try to the version that relies on handlebars I means this: ** $("#addField").append('{{textArea value=name}}<br/>')<strong>, instead of the output being a **textArea</strong>, I get just <strong>{{textArea value=name}}</strong></p></li>
  <li><p>Since the added fields will be essentially thesame field as the ones in the form already, how do I ensure anything typed into it is distinct to that field. In the attached because the textfield input and textArea tags have <strong>value=name</strong>, anything I type in the textfield will appear in the textArea. I know this qwill apply even if I use <strong>valueBinding=controller.name</strong> or if is the views property with <strong>valueBinding=view.name</strong>. How do I keep the value of each additional input field added with a click unique to it.</p></li>
  </ol>
  
  <p><strong>The entire code in the jsfiddle</strong></p>
  
  <pre><code> App = Ember.Application.create();
  
   App.ApplicationView = Ember.View.extend({
    templateName: 'application',
    attributeBindings: ['id'],
    id: "addField",
  
    moreFields: function(){
      $("#addField").append('&lt;input type="text"  value=name /&gt;&lt;br/&gt;');
  
      $("#addField").append('{{textArea value=name}}&lt;br/&gt;');  
    }
  
  });
  </code></pre>
  
  <p>The template:</p>
  
  <pre><code> &lt;script type="text/x-handlebars" data-template-name='application'&gt;
      &lt;h1&gt; Hello&lt;/h1&gt;
      {{input value=name}}
      &lt;br/&gt;
      {{textarea value=name}}
      &lt;br/&gt;
     {{input type=checkbox checked=isActive}}
     &lt;br/&gt;
  
    &lt;button {{action 'moreFields' target='view'}}&gt; click for more field &lt;/button&gt;
     &lt;br/&gt;
    {{outlet}}
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is a jquery based demo by someone else, demonstrating what I hope to achieve, that is what you type into each new field you add remaining distinct: <strong><a href="http://jsfiddle.net/qBURS/2/" rel="nofollow">http://jsfiddle.net/qBURS/2/</a></strong></p>
  
  <p><strong>working solution</strong>:</p>
  
  <p>Augmented the <strong><a href="http://jsfiddle.net/EkJwA/3/" rel="nofollow">jsfiddle</a></strong> provided by <strong>Selva-G</strong>'. Added the <strong>removeFields() method</strong> that removes any added fields and  a <strong>save() method</strong> that just logs the content we intend to pass via the submitted form. </p>