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="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(){
    buildProfile.push({element: $(this)});
});
console.log(buildProfile);

$(".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;
}