JSFiddle - React, Tailwind, and code Playground

by DelphinPRO

HTML

<div id="output"></div>

JavaScript

const books = [
	'Sed tempore',
	'et est soluta',
	'excepturi',
	'temporibus commodi',
	'Qui temporibus',
	'repellat voluptas',
	'earum dignissimos',
	'quasi Ut',
	'omnis ut',
	'et Sit',
	'incidunt sunt',
	'eaque dicta',
	'debitis rerum',
	'est non',
];

const out = document.getElementById('output');

function printPage(pageNo, perPage, elements) {

	const startIndex = (pageNo - 1) * perPage;
	const printedElements = elements.slice(startIndex, startIndex + perPage);
	
	let output = '<hr> <u>Page No. '+pageNo+'</u>';

	printedElements.forEach(function(book, index){
		const num = (startIndex + 1) + index;
		output += '<div><b>'+num+'</b> '+book+'</div>';
	});
	
	out.innerHTML += output;
}

const PER_PAGE = 4;

printPage(1, PER_PAGE, books);
printPage(2, PER_PAGE, books);
printPage(3, PER_PAGE, books);
printPage(4, PER_PAGE, books);
printPage(5, PER_PAGE, books);