Default View edit column order with Javascript

I have a List which is generated and populated with Javascript. However after that I remove a column and add column 'Id' to the default view with the following code:

function fxDeleteFieldFromListView(fieldToRemove, fieldToAdd, OnSuccess, OnError) {

var ctx = new SP.ClientContext(xAppWebUrl);
var oList = ctx.get_web().get_lists().getByTitle(xListTitle);
var oView = oList.get_defaultView();
var viewFields = oView.get_viewFields();
ctx.load(viewFields);

ctx.executeQueryAsync(function (sender, args) {
    viewFields.remove(fieldToRemove);
    viewFields.add(fieldToAdd);
    oView.update();
    ctx.executeQueryAsync(OnSuccess, OnError);

}, OnError);

}

Now, column 'Id' is added AFTER the existing columns in the view, where I would like to have the column at the LEFT side of the view.

How can I reorder the columns with Javascript?

One way I could think of is remove the other 2 columns as well and then add them again after adding the 'Id' column, but I guess there should be some better way.

Thanks in advance!