JSFiddle - React, Tailwind, and code Playground

by itamark

HTML

<body>
		<div id="fancybox"></div>
		<button onclick="addcamera()">Update</button>
	</body>

JavaScript

function user(id, name, level, job, apparel)
{
this.id = i;
 this.name = name;
 this.state = "alive";
 this.level = level;
 this.job = job;
 this.apparel = apparel;
}


i=0;
player = new Array();



//player.push(new user("Main Player", 1, 1, "naked"));
function createlist(){
for (i=0;i<player.length;i++){
		player.id=i;
	}
	

	for (i=0;i<player.length;i++)
{
		$('#fancybox').append("<button onclick='deletecamera(" + player[i].id + ");'>Delete</button>" + player[i].id + "<br >");

}

}


function refreshlist(){
	$('#fancybox').remove();
	$('body').append('<div id="fancybox"></div>');
	createlist();
}

function addcamera(){
	i++;
	newestuser = new user(i, "John", 3, 4, "clothed");
	player.push(newestuser);
	$('#fancybox').append("<button onclick='deletecamera(" + newestuser.id + ");'>Delete</button>" + newestuser.id + "<br >");
}

function deletecamera(id){
	alert(player.length);
	delete player.splice(id,1);
	
	alert('after the splice, player length =' + player.length);
	refreshlist();
}