JSFiddle - React, Tailwind, and code Playground

HTML

<ol id="list"></ol>
<a href="#" id="addmore">Add more</a>

CSS

li{
    color: red;
    overflow: hidden;
}

JavaScript

j$(document).ready(function() {
    startindex = 1;
    loadmore = 15;
    addMore(startindex, loadmore);
    
    var __a = document.getElementById('addmore');
__a.addEventListener('click', function(e) {
        e.preventDefault();
        addMore($('#list li').length, 1);
    });
});

function addMore(startindex,loadmore) {
    src = "https://gdata.youtube.com/feeds/api/videos/hQo6i5p3ZVE/comments?v=2&alt=json-in-script&max-results=" + loadmore + "&start-index=" + startindex;

    $.ajax({
        dataType: "jsonp",
        url: src,
        success: function(data, textStatus, jqXHR) {
            if (data.feed && data.feed.entry) {
                var $list = $('#list');

                $.each(data.feed.entry, function(i, e) {
                    $list.append('<ul id="list"><li class="video"><a href="' + e.link[1].href + '"><span>' + e.author[0].name.$t + '</span></a> - <span>' + e.title.$t + '</span></li></ul>');
                    
                });
            }
        }
    });
}
var get_more = document.getElementById('addmore');
var node = document.getElementById('list');
                    var kids = node.childNodes;
                    //console.log(kids);

if (node.childNodes.length < 10)
    get_more.style.color = 'green';
else
    get_more.style.color = 'red';