How to use jquery datatables in ember cli project

I'm working on an ember project where I'm using jQuery plugin data-tables. I've included the plugin in vendor folder and referencing it from ember-cli. So far so good, but I want to change the data in the table dynamically as per the user selection on the list. The way I implemented is

index.hbs

   
        <tr>
            <td></td>
            <td></td>
            <td><button ></button></td>
        </tr>
    


data-table.hbs
 <thead>
    <tr>
       
          <th></th>
       
    </tr>
 </thead>
 <tbody>
       
 </tbody>

data-table.js
import Ember from 'ember';
export default Ember.Component.extend({
   tagName:'table',
   classNames:['table','table-bordered','table-striped','mb-none'],
   uiSetup: function(){
      $('#myTableID').DataTable();
   }.on('didInsertElement').observes('data.[]')
});

Whenever I click on my list (on left side of my page), I'm doing a transitionToRoute to the same route but the model changes since the id of the selected element changes.

When I selected different id on the left side, my model is changing and the datatable is reflecting the new data but with the existing data below to that. Now, when I click sort on the headers the table is resetting to the previous data by removing the latest data.

I've been on this issue since past 3 days but nothing is changing. The other way I approached to this problem is

index.hbs


data-table.hbs
 <thead>
    <tr>
       
          <th></th>
       
    </tr>
 </thead>
 <tbody>
       
 </tbody>

data-table.js
import Ember from 'ember';
export default Ember.Component.extend({
   tagName:'table',
   classNames:['table','table-bordered','table-striped','mb-none'],
   uiSetup: function(){
    this._super(...arguments);
    var table=$('#myTableID').DataTable();
    table.clear();
    var JSON=[];
    for (var i = this.get('data.currentState').length - 1; i >= 0; i--)   {
        var innerJSON=[];
        innerJSON.push("<a }>"+this.get('data.currentState')[i].id+"</a>");
        innerJSON.push(this.get('data.currentState')[i]._data.type);
        innerJSON.push("<button }>"+this.get('data.currentState')[i]._data.config+"</button>");
        if (this.get('data.currentState')[i].id) {
            JSON.push(innerJSON);
        }
    }
    table.rows.add(JSON);
    table.draw();
}.on('didInsertElement').observes('data.[]'),
actions:{
   link1Clicked(){
      console.log('hello');
   }
}
});

For the second approach, everything is working fine but I could not capture action items since those elements were created dynamically and not treated as ember elements instead they are pure HTML elements.

Any idea, where I'm doing wrong or is there any much cleaner approach for using jQuery data tables in ember cli project.

I also tried using ember-cli-jquery-datatables addon which works only for static data but not for dynamic data.

Thanks in advance, any help would be appreciated.