$(document).ready(function () {
var cssText = { 'font-size': '30px', 'color': 'aqua' };
$("#henry").click(function () {
$("#tt").next().css(cssText);
});
$("#fabregas").click(function () {
$("#fab").next().css(cssText);
});
$("#rocisky").click(function () {
$("#mozart").next().css(cssText);
});
$("#vermaelen").click(function () {
$("#verminator").next().css(cssText);
});
$("#wolcott").click(function () {
alert("This is the last element. There is nothing next to this!!");
});
$("#reset").click(function () {
location.reload();
});
});
<html>
<head>
<title>next</title>
</head>
<body>
<b>List of Players</b>
<ul>
<li id="tt">Thierry Henry</li>
<li id="fab">Cesc Fabregas</li>
<li id="mozart">Tomas Rocisky</li>
<li id="verminator">Thomas Vermaelen</li>
<li id="fastandfurious">Theo Wolcott</li>
</ul><br />
<input type="button" id="henry" value="Next of Henry" />
<input type="button" id="fabregas" value="Next of Fabregas" />
<input type="button" id="rocisky" value="Next of Rocisky" />
<input type="button" id="vermaelen" value="Next of Vermaelen" />
<input type="button" id="wolcott" value="Next of Wolcott" />
<input type="button" id="reset" value="Reset" />
</body>
</html>