<div id="view">
	<label data-value="first"></label>
	<b data-value="lastname"></b><br />
	<i data-value="email"></i>
</div>
<br />
<br />
<button id="buttonNext">Next</button>
body {
	background: #606060;
	font-family: "Lucida Sans Unicode", Sans-Serif;
	font-size: 14px;
	padding-top: 32px;
	text-align: center;
}

#view {
	display: inline-block;
	background-color: #ffffff;
	border-radius: 3px;
	width: 240px;
	padding: 16px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.8);
	color: #404040;
}

i {
	color: #8000ff;
	font-size: 0.8rem;
}
var user_list = [
	{ id: 1, first: "Elon", lastname: "Musk", email: "elon.musk@spacex.com" },
	{ id: 2, first: "Jeff", lastname: "Bezos", email: "jeff.bezos@amazon.com" },
	{ id: 3, first: "Jack", lastname: "Ma", email: "jack.ma@alibaba.com" }
];

var index = 0;

function display(user) {
	xJson.Write($("#view"), user);
}

function displayNext(e) {
	index = (index + 1) % user_list.length;
	display(user_list[index]);
}

function init() {
	display(user_list[0]);
	// Set jQuery event on #buttonNext
	$("#buttonNext").on("click", displayNext);
}

// jQuery Ready -> init
$(init);

External CSS

  1. https://x-json.com/_library/xJSon/min/xJson.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
  2. https://x-json.com/_library/xJson/min/xJson.min.js