JSFiddle - React, Tailwind, and code Playground

HTML

<button id="method1">Load js by $.getScript</button>
<button id="method2">Load js by inserting tags</button>

JavaScript

var scripts = [
  '//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js',
];
var dependentscripts = [
  '//cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js',
  '//cdn.datatables.net/fixedheader/3.1.2/js/dataTables.fixedHeader.min.js'
];


$('#method1').on('click', function() {
  getScripts(scripts).done(function() {
    getScripts(dependentscripts).done(function() {
	    console.log('ok');
    })
  });
});
$('#method2').on('click', function() {
	var html = scripts.map(function(s) {
    return '<script type="text/javascript" src="' + s + '"></' + 'script>';
  });
  $('body').append(html.join(''));
});
function getScripts(scripts) {
  var _arr = $.map(scripts, function(src) {
    return $.getScript(src);
  });
  _arr.push($.Deferred(function(deferred) {
    $(deferred.resolve);
  }));
  return $.when.apply($, _arr);
}