JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <table id="fancybox">
        <th>Delete</th>
        <th>id</th>
    </table>
    <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();

var numcams = "<td><input type='text' name='numcams'></td>";

var newrow = "<tr id='" + newestuser.id + "'><td><button onclick='deletecamera(" + newestuser.id + ");'>Delete</button></td><td>" + newestuser.id + "</td><td><input type='text' name='numcams'></td></tr><br >";


//player.push(new user("Main Player", 1, 1, "naked"));
function createlist() {
    for (i = 0; i < player.length; i++) {
        $('#fancybox').append("<tr><td id='" + player[i].id + "'><button onclick='deletecamera(" + player[i].id + ");'>Delete</button></td><td>" + player[i].id + "</td></tr><br >");

    }
}


function refreshlist() {
    $('#fancybox').remove();
    $('body').append('<table id="fancybox"><th>Delete</th><th>id</th></table>');


    createlist();
    $('#fancybox').append('<button onclick="addcamera()">Update</button>');
}
i = 0;

function addcamera() {

    newestuser = new user(i, "Default", 1, 1, "clothed");
    player.push(newestuser);
    $('#fancybox').append("<tr id='" + newestuser.id + "'><td><button onclick='deletecamera(" + newestuser.id + ");'>Delete</button></td><td>" + newestuser.id + "</td><td><input type='text' name='numcams" + newestuser.id + "'></td></tr><br >");
    i++;
}


function deletecamera(id) {
    alert('before the splice, player length =' + player.length);


    player.splice((id), 1);

    i = 0;
    for (i = 0; i < player.length; i++) {
        player[i].id = i;
    }

    alert('after reassigning, player length =' + player.length);

    refreshlist();
}