JSFiddle - React, Tailwind, and code Playground

by Bhabani Raju

HTML

<button onclick="Load();">click me to load new videos</button>

<div id="Container">
    <div class="Row">
        <div class="Video">1</div>
        <div class="Video">2</div>
        <div class="Video">3</div>
        <div class="Video">4</div>
    </div>
</div>

CSS

#Container
{
    display: table;
    border-collapse:separate;
    border-spacing: 2px;
    width: 100%;
    border: 1px solid black;
}
.Row
{
    display: table-row;
    border: 1px solid red;
}
.Video
{
    width: 25%;
    display: table-cell;
    background-color: grey;
    text-align: center;
}

JavaScript

function Load()
{
    if(index == videoSources.length)
        return;
    var newElement = '<div class="Row">';
    for(var i=0; i< 4; i++)
        newElement += '<div class="Video">'+videoSources[index++]+'</div>';
    newElement += '</div>';
    $(newElement).appendTo($('#Container'));
};

var videoSources = new Array("Src1","Src2","Src3","Src4","Src5","Src6","Src7","Src8","Src9","Src10","Src11","Src12","Src13","Src14","Src15","Src16");

var index = 0;