title: select2 not behaving properly with Datatables
body: <p>I am trying to use <code>select2</code> with Datatables to render a dropdown multi-select option on a table. However it does not seem to behave well even after following the basic example as described <a href="https://select2.org/getting-started/basic-usage" rel="nofollow noreferrer">here</a>. </p>
  
  <pre><code>    import $ from 'jquery';
      import 'datatables.net';
      import 'datatables.net-dt/css/jquery.dataTables.css';
      import 'select2';
  
      var table = $('#failTable').DataTable({
            destroy: true,
            paginate: false,
            scrollY: 300,
            data: fail,
            columns: [{
              title: "Example",
              render: function(data, type, row) {
                var depts = getCurrentMapping('departments');
                let content = "&lt;select class='form-control' name='' id='' placeholder='Select a dept...' multiple='multiple'&gt;";
                for (var dept in depts) {
                  content += "&lt;option value='" + depts[dept] + "'&gt;" + dept + "&lt;/option&gt;";
                }
                content += "&lt;/select&gt;";
                return content
              }
            }],
            initComplete: function(settings, json) {
              $('.form-control').select2();
            }
          });
  </code></pre>
  
  <p>The result is displaying as below</p>
  
  <p><a href="https://i.stack.imgur.com/aiuLQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aiuLQ.png" alt="screenshot 1"></a></p>
  
  <p>And this is what happens when values are selected</p>
  
  <p><a href="https://i.stack.imgur.com/n09KX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/n09KX.png" alt="screenshot2"></a></p>
  
  <p>As you can see, the values are still <strong>all</strong> shown, and the <code>x</code> button to cancel a selection does not work. What am I doing wrong?</p>