Need to initiate the multiple jquery dialog

Here, I have a jquery dialog using an ember component. I want to have a multiple dialog.

In my js:

App.IndexRoute = Ember.Route.extend({

  actions: {
    test: function () {
      var self = this;
      self.get('controller').set('isConfirmDialog', true);  // No I18N
      self.get('controller').set('dialogContent', "Hi, Alert!");  // No I18N
    }
  }
});

App.IndexController = Ember.Controller.extend({
    isConfirmDialog: false,
    dialogContent: ''
});
App.ConfirmDialogComponent = Ember.Component.extend({

    defaultOptions: { 
        height:'300', // No I18N
        width: '300', // No I18N
        modal: true, // No I18N
        title: 'Alert', // No I18N
    },
    didInsertElement: function(){
        var self = this; // No I18N
        self.send("showConfirmDialog"); // No I18N
    $("#dialogdiv").bind('dialogclose', function(){ // No I18N
        $("#dialogdiv").html('').dialog('destroy'); // No I18N
        self.sendAction('dialogreset'); // No I18N
    });
},
actions: {

    showConfirmDialog: function(){
        var self = this; 
        self.set('defaultOptions', $.extend( {}, self.get('defaultOptions'), self.get('dialogObj') )); // No I18N

        $( "#dialogdiv" ).dialog( self.get('defaultOptions') ); // No I18N
    }
}

});

In my Template:

<script type="text/x-handlebars" data-template-name="index">
   <button {{action "test"}}>Alert</button>
   {{#if controller.isConfirmDialog }}   
       {{confirm-dialog dialogContent=dialogContent dialogreset='resetDialog'}}  
   {{/if}}   
</script> 

 <script type="text/x-handlebars" data-template-name="components/confirm-dialog">
     <div id="dialogdiv">{{{controller.dialogContent}}}</div>
 </script>

This is how I am initializing my dialog component. If I need to initiate the other dialog inside that dialog while click the content "Hi, Alert!", what should I do? Let me know if I missing any logic or anything.

My working link : JSBIN