How can I separate the order of ul.select2-selection__rendered and ul.select2-results__options?

If multiple options are specified.
I want ul.select2-selection__rendered to be displayed in the order of selection, and ul.select2-results__options to be displayed in the order defined.

var selected = [3, 1];
var options = {1: 'one', 2: 'two', 3: 'three'};
$('select').select2({
  multiple: true
});
$.each(options, function(idx, value) {
  var newOption = $('<option>').attr({'value': idx}).text(value);
  $('select').append(newOption);
});
$.each(selected, function(idx, value) {
  var $element = $('select').find('option[value='+value+']');
  $element.detach();
  $('select').append($element);
});
$('select').val(selected).trigger('change');
$('select').html($('select').find('option').sort(function (a, b) {
  return a.value == b.value ? 0 : a.value < b.value ? -1 : 1
}));

I expect ul.select2-selection__rendered to be [3,1]
and ul.select2-results__options to be [1,2,3].