Dynamically create verbose input fields. Send them to an array

I created jsFiddle: check it out

Currently, when creating areas, they are not isolated. Therefore, if I create two input fields and type one of them, the text is duplicated in the secondary input field.

How can I create several inputs, fill them out separately and send them at the same time?

HTML

<div ng-app="miniapp" ng-controller="MainCtrl">
     <a href="" data-clicker>add inputs</a>
    <form ng-model="project" ng-submit="addPage()">
        <div class="sections"></div>  

        <input type="submit" value="submit"/>
    </form>

    <hr>
    <hr>
    <p>project: {{project.name | json}}</p> 
    <p>output: {{output | json}}</p> 
</div>

Js

var $scope;
var app = angular.module('miniapp', []);

app.directive('clicker', function($compile) {
    'use strict';

    return {
        compile: function(tElement, tAttrs) {
            //var t = '<div data-pop>Pop</div>';
            var t = '<div><input type="text" ng-model="project.name"></div>';

            return function(scope, iElement) {
                iElement.click(function() {
                    $('.sections').append($compile(t)(scope));
                });
            };
        }
    }
});



app.controller('MainCtrl', function($scope) {
    $scope.project = {"name":"sup"};
    $scope.output = [];
   $scope.addPage = function() {
     $scope.output.push(_.clone($scope.project));
   };


}); 

I feel like I tried everything ... Is it just a flaw in my logic? If so, can you show me an example that works according to the user stream below?

User flow