pressing tab select the text of a certain element in tinymce - select

Question

HOW DO I ACHIEVE THE FOLLOWING?
[1st image] On Initiate: highlight title
[2nd image] Press Tab: highlight description
[3rd image] Press Tab: highlight content
Press Tab Again Goes back to highlight the title and goes on
below is the tinymce content:
<hr>
<div id='title'>
TITLE
</div>
<hr>
<div id='description'>
DESCRIPTION
</div>
<hr>
<div id='content'>
CONTENT
</div>
below is the current function i have of selecting the text.
// the problem is that it doesn't select the text but put the carret in the first part of the text
// looks like this (|*carret) --> |TITLE or |DESCRIPTION or |CONTENT
// id = #title, #description, #content
tinyMceSelectText = function (id) {
if ($('#id_of_tinymce_iframe').contents().find(id).length > 0) {
var $itemNode = $('#content_editor_ifr').contents().find(id);
var text = '';
var items = $itemNode.contents();
// clean up the span and other elements automatically inserted by tinymce
$.each(items, function (i, val) {
if ($(val).length == 0) {
return;
}
if ($(val).prop('nodeName') == 'BR') {
text += '<br/>';
} else {
var t = $(val).text();
text += t;
}
})
$itemNode.html(text);
var len = $itemNode.contents().length - 1;
var textNode = $itemNode.contents()[len];
start = (start === undefined) ? 0 : start;
end = (end === undefined) ? textNode.length : end;
var ed = tinyMCE.activeEditor;
var range = ed.selection.getRng(true);
start = (start === undefined)? 0 : start;
end = (start === undefined)? 0 : end;
try {
range.setStart(textNode, start);
range.setEnd(textNode, end);
range.collapse(true);
ed.selection.setRng(range);
//ed.selection.collapse(false); // added to put carret to the last part of the text
var items = $itemNode.contents();
} catch (err) {}
}
}