OpenLayers 4 remove features.getFeatures() sort array on change

Question

I add the function drag on a feature that I draw, but OpenLayers 4 seems that when you modify a feature, the new index of the one you modify now is different.

How can I remove that function from the core? or exist an alternative to prevent this?

This is what I use to add the drag function.

$("#markdrag").click(function(e) {

  e.preventDefault();

  var sel = document.getElementById('tlfeature');
  // get ID of the current marker
  var ids = sel[sel.selectedIndex].id;
  var dragInteraction = new ol.interaction.Modify({
    features: new ol.Collection([Msource.getFeatures()[ids]]),
    style: null
  });
});

Where IDS is the index of the feature, but if I draw 2 features and drag the 1st at the end of the interaction the index is now 1 and not 0.

I need to work on Index because when I draw a marker I have a function that:

populates the drop-down menu with the marker (name = Marker + source index) add a Textarea (bind to the marker ID(source index) so when you change the marker you have a related Textarea) I'm working on this events to create all of these.

drawLayer.on("change", function(){
  // remove the interaction when you plot one marker
  map.removeInteraction(draw); 
});

// occurs when you finish to draw the current element
draw.on("drawend", function(){
  // function to create everything
  drawing();
})

here a screenshot of how it looks

Answer 1

At the end, I approach the problem with another method: I'm using a var counter to prevent launching the function when I use the remove button (When I delete a feature the source change, so execute the function even if i'm not adding but removing), assign an ID at the features and call them by ID

drawLayer.on("change", function(){
  map.removeInteraction(draw);

  if (counter == "true") {
    counter = "false";
    var ind = Msource.getFeatures().length - 1;
    Msource.getFeatures()[ind].setId(MarkId - 1);
  }
});

var MarkId = 0;

function drawing(){

  counter = "true";
  MarkId += 1;

  $('<option>', { 'value': (MarkId -1), 'text': 'Marker ' +(MarkId) }).attr('id', MarkId - 1).appendTo('#tlfeature');

  $('<textarea>', { 'name': 'Marker ' +MarkId, 'rows': '4', 'class': (MarkId -1), 'placeholder': "enter text..." }).appendTo('.textDiv');

} // end drawing

// drag button
$("#markdrag").click(function(e) {

  e.preventDefault();

  // prevent error enabling the click just if the value of the option selected is not empty
  if ($('#tlfeature').val() != null) {

    var sel = document.getElementById('tlfeature');
    // get ID of the current marker
    var ids = sel[sel.selectedIndex].id;

    //var pointFeature = new ol.Feature(new ol.geom.Point([0, 0]));
    var dragInteraction = new ol.interaction.Modify({
        features: new ol.Collection([Msource.getFeatureById(parseInt(ids))]),
        style: null
    });

    map.addInteraction(dragInteraction);


    // remove the interaction when the translate of the feature end
    dragInteraction.on("modifyend", function(){
      map.removeInteraction(dragInteraction);

    }); // end dragInteraction.on

  }

}); // end #markdrag click