JSFiddle - React, Tailwind, and code Playground

by mblase75

HTML

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

CSS

ol {
    list-style: decimal;
    margin-left: 2em;
}

JavaScript

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

function addMore(startindex,loadmore) {
    src = "https://gdata.youtube.com/feeds/api/videos?category=games&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('<li class="video"><a href="' + e.link[1].href + '"><span>' + e.title.$t + '</span></a><span>' + e.author[0].name.$t + '</span></li>');
                });
            }
        }
    });
}