Как создать иерархию чисел в оглавлении jquery? ⇐ Jquery

[Anonymous]

У меня есть структура подзаголовков:
Red Fruits
Apple
Raspberry
Orange Fruits
Orange
Tangerine
Vegetables Which Are Actually Fruits
Tomato
Eggplant

Скрипт автоматически создает оглавление: https://jsfiddle.net/voxtermen/t5nkjbvo/2/
Результат выглядит так :
1. Red Fruits
2. Apple
3. Raspberry
4. Orange Fruits
5. Orange
6. Tangerine
7. Vegetables Which Are Actually Fruits
8. Tomato
9. Eggplant

Я хочу получить такой результат:
1. Red Fruits
1.1 Apple
1.2 Raspberry
2. Orange Fruits
2.1 Orange
2.2.Tangerine
3. Vegetables Which Are Actually Fruits
3.1 Tomato
3.2 Eggplant

Что для этого нужно исправить в коде?
Я пробовал использовать этот скрипт
(function($){

function tableContentPost(){
var tocList = $('#toc-list');

$('.page-content').find('h2, h3').each(function(index) {
var heading = $(this);
var title = heading.text();
var id = 'heading' + index;

// Assign an ID to the heading if it doesn't have one
if (!heading.attr('id')) {
heading.attr('id', id);
} else {
id = heading.attr('id');
}

var listItem = $('[*]').html('' + title + '');

if (heading.is('h3')) {
listItem.addClass('sub-item');
}

tocList.append(listItem);
});
}

$(document).ready(function() {
tableContentPost();
});

})( jQuery );


Подробнее здесь: https://stackoverflow.com/questions/785 ... nts-jquery