Embedding two Ember Cli App Instances in the same page

I have two ember applications build. I am trying to insert both application into the same page. First ember app is built with #app1 as rootElement. Second ember app is built with #app2 as rootElement. FYI I am building ember apps using Ember-Cli. When I load the two build into the same page. The App which is loaded last is inserted to its corresponding div.i.e.

I have two divs.

<div id="app1"></div>
<div id="app2"></div>

<script>
var app1HTML=$.ajax({url:"/embertest1/index.html",async:false}).responseText;
var app2HTML=$.ajax({url:"/embertest2/index.html",async:false}).responseText;
$("#app1").html(app1HTML);
$("#app2").html(app2HTML);
</script>

Here app2 div is loaded with corresponding ember app.

When I interchange the order.i.e.

$("#app2").html(app2HTML);
$("#app1").html(app1HTML);

Div with app1 is loaded with its ember app.

How to load both the apps at the same time?