JSFiddle - React, Tailwind, and code Playground

by hlmurray91

HTML

<div class="build-out" data-title="Title 1"></div>
<div class="build-out" data-title="Title 2"></div>
<div class="build-out" data-title="Title 3"></div>
<div class="build-out" data-title="Title 4"></div>
<div class="build-out" data-title="Title 5"></div>
<div class="build-out" data-title="Title 6"></div>
<div class="build-out" data-title="Title 7"></div>
<div class="build-out" data-title="Title 8"></div>
<div class="build-out" data-title="Title 1"></div>
<div class="build-out" data-title="Title 2"></div>
<div class="build-out" data-title="Title 3"></div>
<div class="build-out" data-title="Title 4"></div>
<div class="build-out" data-title="Title 5"></div>
<div class="build-out" data-title="Title 6"></div>
<div class="build-out" data-title="Title 7"></div>
<div class="build-out" data-title="Title 8"></div>
<div class="build-out" data-title="Title Trump" data-id="trump"></div>
<div class="build-out" data-title="Title 2"></div>
<div class="build-out" data-title="Title 3"></div>
<div class="build-out" data-title="Title 4"></div>
<div class="build-out" data-title="Title 5"></div>
<div class="build-out" data-title="Title 6"></div>
<div class="build-out" data-title="Title 7"></div>
<div class="build-out" data-title="Title 8"></div>
<div class="build-out" data-title="Title 1"></div>
<div class="build-out" data-title="Title 2"></div>
<div class="build-out" data-title="Title 3"></div>
<div class="build-out" data-title="Title 4"></div>
<div class="build-out" data-title="Title 5"></div>
<div class="build-out" data-title="Title 6"></div>
<div class="build-out" data-title="Title 7"></div>
<div class="build-out" data-title="Title 8"></div>
<div class="built-profile">
</div>
<button class="load-more">Load More</button>

CSS

.build-out{
    display: none;
}

JavaScript

var container = $(".built-profile");
	buildProfile = [],
    builtNumber = 0,
    int = 4;
$(".build-out").each(function(){
    var ele = {};
    ele.element = $(this);
    ele.id = $(this).data("id");
    ele.title = $(this).data("title");
    buildProfile.push(ele);
});

$(".load-more").on("click", function(){
	var newProfiles = buildProfile.splice(0, int);
    for(var i = 0, x = newProfiles.length; i < x; i++){
    	container.append(buildProfiles(newProfiles[i]));
    }
});

function buildProfiles(profileElement){
    var contain = $("<div></div>");
    contain.html(profileElement.element.data("title"));
    return contain;
}


for(var i = 0, x = findID("trump")/int; i < x; i++){
	$(".load-more").click();
} 

function findID(id){
    var count = 0;
	for(var i = 0, x = buildProfile.length; i < x; i++){
        count++;
        if(buildProfile[i].id == id){
            return count
        }
    }
    return "not found"
}