JavaScript splice function deletes the item and all the next items

Greetings I have a simple JS CRUD project where I am adding users to array and store the array in the local storage, and I have a function to delete the users, every user row in the table have including button with onclick event that calls the function and giving it the user index

And in the function I get the index and call the splice function to delete just one item starting from the index

But when I delete an item it deletes the item and all the next items and I get this error in my console Uncaught RangeError: Maximum call stack size exceeded

The add user function

$('#addUserBtn').click(function (e) {
    e.preventDefault();

    let user = {
        no: $('#userNoInput').val(),
        name: $('#userNameInput').val(),
        email: $('#userEmailInput').val(),
        tel: $('#userTelInput').val(),
        dob: $('#userDobInput').val(),
        rmk: $('#userRmkInput').val(),
    }

    usersContainer.push(user);

    localStorage.setItem('myUsers', JSON.stringify(usersContainer));
    displayUsers();
    //clearForm();
});

the displayUsers() function

function displayUsers() {
let markUp = ``;

for (let i = 0; i < usersContainer.length; i++) {
    markUp += `<tr><td>${usersContainer[i].no}</td><td>${usersContainer[i].name}</td>
<td>${usersContainer[i].email}</td><td>${usersContainer[i].tel}</td><td>${usersContainer[i].dob}</td><td>${usersContainer[i].rmk}</td><td><button class="btn btn-danger" onclick="onclick(deleteUser(${i}))"><i class="fas fa-trash-alt"></i></button></td></tr>`;
    }

    $('#tableBody').html(markUp);
}

The delete function

function deleteUser(index) {
    usersContainer.splice(index, 1);
    localStorage.setItem('myUsers', JSON.stringify(usersContainer));
    displayUsers();
}