how to load ember component in the same template number of times?

please have a look into code which i have done:

<script type="text/x-handlebars" id="Script1" data-template-name="emplployeeTemplate">
 <div id="employee">
         <div id="emplpyee_data">
                <svg id="employeeSvg">
                    <defs></defs>
                    <g id="layerWrapper" class="svg-view">
                      {{employee-Details id = "empdetaild" empname = empname empDepartment= empDepartment}} 
                    </g>
                </svg>
            </div>
</div>
    </script>  

Here when i call the template one time(as it is shown in the below loop) it is called and svg is generated !!(and that feels good bingo) but for more than one(more than one iteration) i can not call the same :( (employee-details component) i want to load the employee-Details more than one and the values passed will be different every time.

I am dong the call from other controller in loop as mentioned below :

for (i = 0; i < 10; i++) {
            this.transitionToRoute('emplployeeRoute');
}   

Some of the questions on bases of my research ::
1. transitionToRoute is doing problem because it is Async call ??
2. or we can not load the component more than once in the same template ??

Am i doing in wrong way or is there any other better way available to to the same ??