JSFiddle - React, Tailwind, and code Playground

HTML

<ol class="nested">
    <li id="list_1">1</li>
    <li id="list_2">
        <ol>
            <li id="list_3">2</li>
            <li id="list_4">3</li>
        </ol>
    </li>
    <li id="list_5">4</li>
</ol>

JavaScript

(function($) {
    '$:nomunge'; // Used by YUI compressor.
    $.fn.iff = function(test) {
        var elems = !test || $.isFunction(test) && !test.apply(this, Array.prototype.slice.call(arguments, 1)) ? [] : this;
        return this.pushStack(elems, 'iff', test);
    };

})(jQuery);

var parent_ID = 1;
var selector = '#list_' + parent_ID
$(selector).
    iff($(this).children('ol').length > 0)
    .append("<li>new</li>").end()
    .iff($(this).children('ol').length == 0)
    .append("<ol><li>new</li></ol>");