JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/tags/v1.0.0/ember.js"></script>
<script type="text/x-handlebars" data-template-name='application'>
    <h1> Hello</h1>
    {{#each view.content}}
    {{input valueBinding='name'placeholder="name"}}
     <br/>
      {{textarea valueBinding='bio' placeholder="your bio"}}
    <br/>
    
    {{input type=checkbox checked=isActive}}
    <br/>
    <button {{action 'removeFields' this target='view'}}> remove </button>
    <br/>
    {{/each}}
    <br/>
    <button {{action 'moreFields' target='view'}}> click for more field </button>
    <br/>
     <br/>
    <button {{action 'save' view.content}}> save form </button>
    <br/>
    {{outlet}}
</script>

JavaScript

App = Ember.Application.create(
);

App.ApplicationRoute = Ember.Route.extend({
    actions: {
        save: function(content){
            var data = [];
            content.map(function(item) {
                data.push(item.getProperties(['name','bio']));
            });
            console.log(data);
        }
    }
});

App.ApplicationView = Ember.View.extend({
    templateName: 'application',
    content: [Em.Object.create({name: 'testname', bio:''})],
    attributeBindings: ['id'],
    id: "addField",
    moreFields: function(){
        console.log(this.get('content').pushObject(Em.Object.create({name: '', bio:''})));
        console.log(this.get('content'));     
    },
    removeFields: function(context){
        console.log(   this.get('content').removeObject(context));
        console.log(this.get('content'));     
    }
});