CKEditor plugin - How to have a span within a span, by using editor.applyStyle

Currently, I have a custom plugin dialog with drop down box selection, which allows me to insert eitherApple or Samsung tag in between the selected text.

Here's how its onClick function looks like.

onOk: function() {
    var dialog = this;

    // Drop down box selection. Can be either "Apple" or "Samsung"
    var brand = dialog.getValueOf('tab-brand', 'brand');

    var style = new CKEDITOR.style( { element: 'span', attributes: { 'brand': brand } } );
    editor.applyStyle( style );

    console.log(editor.getData());
}

The following code, doesn't work within my expectation. Let's say, I have the following text

Mary has a little lamb

Step 1

"little" was highlighted. "Apple" was selected. OK pressed

Mary has a little lamb

I would get the following console output.

Mary has a <span brand="Apple">little</span> lamb

Step 2

"a little lamb" was highlighted. "Samsung" was selected. OK pressed

Mary has a little lamb

I would get the following console output.

Mary has <span brand="Samsung">a little lamb</span>

However, I'm expecting the following output. A span within a span.

Mary has <span brand="Samsung">a <span brand="Apple">little</span> lamb</span> 

Is there any way I can achieve such, by modify my original code in onOk?