JSFiddle - React, Tailwind, and code Playground

HTML

<ol type="1">
    <li>First</li>
    <li>Second
        <ol type="a">
            <li>Third</li>
            <li>Fourth
                <ol type="1">
                    <li>Fifth</li>
                </ol>
            </li>
            <li>Sixth</li>
        </ol>
    </li>
    <li>Seventh</li>
</ol>

CSS

ol {list-style: none;}

JavaScript

var letters = 'abcdefghijklmnopqrstuvwxyz';
$('li').each(function (i, ele) {
    $('<span />', {html : (function() {
        return $(ele).parents('li').addBack().map(function (_, a) {
                 return isNaN( $(a).parent('ol').attr('type') ) ? 
                        letters[$(a).index()] :
                        $(a).index() + 1;
                }).get().join('.') + ')&nbsp;';
     }())}).prependTo(ele);
});


/*
1) First
2) Second
  2.a) Third
  2.b) Fourth
    2.b.1) Fifth
  2.c) Sixth
3) Seventh
*/