title: Select2 multiple doesn't work properly
body: <p>I have multiple select drop down which should to add selected items as rows in data table, and remove them from data table when item is unselected. It look like a this image. <a href="https://i.stack.imgur.com/SLHCy.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SLHCy.jpg" alt="Bill column added in table" /></a>. When i want to add other column which is before first selected is ok, but when wanted column is after first selected this is not possible.  <a href="https://i.stack.imgur.com/5Qmqh.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5Qmqh.jpg" alt="Bill and web are added but status not." /></a>. <a href="https://i.stack.imgur.com/BZBkW.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BZBkW.jpg" alt="Values in select drop down are" /></a>. I have this code in my script.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#displayInTable').select2({
    placeholder: "Display in table",
    allowClear: true
  });
  $('#displayInTable').change(function() {
  
    table = $("#analysisTable").DataTable();
  });
  
  $('#displayInTable').on('select2:select', function() {
    //table.column(0).visible(true);
    var selected_value = $('#displayInTable').val();
    table.column(selected_value).visible(true);
  }).trigger('change');
  
  $('#displayInTable').on("select2:unselecting", function(e) {
    var unselected_value = $('#displayInTable').val();
    table.column($(this).val()).visible(false);
  }).trigger('change');</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" /&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" /&gt;
  
  &lt;select class="form-control select2" multiple="multiple" id="displayInTable" data-placeholder="Display in table" style="width: 100%;"&gt;
    &lt;option value="4"&gt;e-mail&lt;/option&gt;
    &lt;option value="5"&gt;web&lt;/option&gt;
    &lt;option value="6"&gt;bill&lt;/option&gt;
    &lt;option value="7"&gt;savings&lt;/option&gt;
    &lt;option value="8"&gt;status&lt;/option&gt;
  &lt;/select&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Also data-placeholder doesn't work.</p>