Datatables Checkboxes extension combined with Sortable

For a project I’m working on, the admin of the system will be assigning questions to some quizes from a huge pool of questions. For better filtering of the questions upon their selection, I had to use Datatables. Then, I noticed that a simple checkbox for each table row wasn’t enough to select them when being paginated, so after some research I found the Checkboxes extension for Datatables that would solve $_POST of the selected rows and pagination problems.

Everything worked fine with the transition, but the latest requirement of my project is the ability to re-order questions, so I also utilized jQuery Sortable, to re-order the question rows. But then I noticed that re-ordering the rows, doesn’t actually re-order the selected rows returned by Datatables Checkboxes…

The minimal working code I used for a mockup of my project is below:

jQuery(function($) {
  $('#questions-pool tbody').sortable({
    connectWith: '#questions-pool tbody',
    handle: 'td.move-handle',
  });

  var questions = $('#questions-pool').DataTable({
    ordering: false,
    dom: '<"#upper-controls"lf>t<"#lower-controls"ip>',
    lengthMenu: [
      [10, 50, 100, -1],
      [10, 50, 100, 'All']
    ],
    initComplete: function(settings) {
      var api = this.api();
      var selected = [387, 386, 385, 384, 383, 382, 381, 380, 379, 378];

      api.cells(
        api.rows(function(idx, data, node) {
          return (selected.indexOf(Number(data[2])) >= 0) ? true : false;
        }).indexes(),
        3
      ).checkboxes.select();
    },
    columnDefs: [{
      targets: 3,
      checkboxes: {
        selectAllPages: false,
      }
    }],
  });

  $('#get-selected').click(function(event) {
    var form = $('#questions-form');

    $(form).find('.questions-postfields').remove();

    console.log('Deleted previous fields');

    $.each(questions.column(3).checkboxes.selected(), function(index, rowId) {
      $(form).append(
        $('<input>')
        //  .attr('type', 'hidden')
        .attr('name', 'questions[]')
        .attr('class', 'questions-postfields')
        .val(rowId)
      );
    });
  });
});

Also a working fiddle of the code above can be found here. So the fiddle starts with some rows already selected by their respective checkboxes. I also have a button that emulates form submission, where upon the submission I’ve coded the script to create on-the-fly hidden fields for each selected ID. So upon clicking the button, the previous fields are removed and appended to the form from scratch. However, no matter how you re-order the rows, the selected IDs always appear in the same order.

Do you have any idea why this is happening?