JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mains">click here to get first four then</div>
<button id="fourmore">GET 4 MORE</button>
<div id="pm-page-main"></div>

JavaScript

$(document).ready(function() {
    var a;
    var b;
    var y;
    var z;
     var pmmain = ["aaa", "bbb", "ccc", "ddd", "eee", "fff", "ggg", "hhh", "iii", "jjj", "kkk", "lll", "mmm", "nnn", "ooo", "ppp"];
    $("#mains").one("click", function() {
       
         y = 0;
         z = y +4;
         a = 4;
         b = 0;
        for ( a=y; a < z; a++) {
            $("#pm-page-main").append("<div class=\"main-box\"><div class=\"title-box\"><span         class=\"reg-wht-bold\">" + pmmain[a] + "</span></div><BR><BR><img src=\"imgs\\" + pmmain[a] + ".png\"></div>");
        }
        
    });
    $("#fourmore").click(function() {
         
             b= a
             z = b +4;
	for (b=a; b < z; b++) {
            $("#pm-page-main").append("<div class=\"main-box\"><div class=\"title-box\"><span         class=\"reg-wht-bold\">" + pmmain[b] + "</span></div><BR><BR><img src=\"imgs\\" + pmmain[b] + ".png\"></div>");
    }
        a = a+4;
});
});