JSFiddle - React, Tailwind, and code Playground

by adiioo7

HTML

<div class="hold"></div>
<input type="button" id="btnLoadMore" value="Load More"/>

CSS

.hidden {
    display:none;
}

JavaScript

var json = [{
    "imagepath": "sample url",
        "heading": "sample heading",
        "details": "sample details"
}, {
    "imagepath": "sample url",
        "heading": "sample heading",
        "details": "sample details"
}, {
    "imagepath": "sample url",
        "heading": "sample heading",
        "details": "sample details"
}, {
    "imagepath": "sample url",
        "heading": "sample heading",
        "details": "sample details"
}, {
    "imagepath": "sample url",
        "heading": "sample heading",
        "details": "sample details"
}, {
    "imagepath": "sample url",
        "heading": "sample heading",
        "details": "sample details"
}, {
    "imagepath": "sample url",
        "heading": "sample heading",
        "details": "sample details"
}];

jQuery(function ($) {
    $.each(json, function (i, value) {
        var list = "<li class='hidden' >" + "<img src'" + value.imagepath + "' alt=''/>" + "<span>" + value.heading + "</span>" + "<span>" + value.details + "</span>"
        $('.hold').append(list);
    });
    
    function loadMore(){
        $(".hold .hidden").slice(0,2).removeClass("hidden");
    }
    
    loadMore();
    
    $("#btnLoadMore").on("click",loadMore);
    
    
});