Я не могу редактировать (склеивать) определенный индекс в моем массиве через DOM, используя функцию

Question

Итак, я хотел бы изменить конкретный индекс, например, «Лиза», и я хочу сделать это через созданный мной DOM. Как вы можете видеть, я использую цикл, чтобы вывести все <tr> и <td> в виде таблицы. То, что я также делаю, дает каждому из них id='edit"+[i]+"', я пытался объединить каждый массив с каждым идентификатором, так как они всегда объединяются.

var people = ["Olle", "Lisa", "Kalle", "Elin", "Johan", "Linda"];```

function listNames(){

  varMyinnerHTLM = "<table class='nametable table table-dark table-hover'>";
  varMyinnerHTLM += "<tbody>";
  varMyinnerHTLM += "<tr><th>Namn</th></tr>";

    for(i=0;i<people.length;i++){ //Loopar ut arrayens namn som en lista.
      varMyinnerHTLM += "<tr><td><a href='#'>"+people[i]+"</a><button type='button' id='edit"+[i]+"' class='close' aria-label='Close'onClick='edit()'><span aria-hidden='true'>&#x270f;</span></button><button id='close"+[i]+"' type='button' class='close' aria-label='Close' onClick='removeRow()'><span aria-hidden='true'>&times;</span></button></td></tr>";

    }

  varMyinnerHTLM + "</tbody>";
  varMyinnerHTLM += "</table>";
  varMyinnerHTLM += "<input type='text' id='newname' class='nameinput input-group-text' placeholder='Namnet på personen'></br>";
  varMyinnerHTLM += "<button type='button' id='addName' class='btn btn-primary' onClick='addName()'>Lägg till</button>";
  varMyinnerHTLM += "<button type='button' id='reset' class='btn btn-light' onClick='reset()'>Nollställ</button>";
  varMyinnerHTLM += "<button type='button' class='hide btn btn-success' onClick=''>Godkän</button>";
  document.getElementById("jspage").innerHTML = varMyinnerHTLM;


}

Итак, что я пытаюсь достичь, так это то, что я хочу иметь возможность редактировать определенный индекс в моем массиве способом onClick = "function()". Значение должно быть задано на входе, и тогда функция edit() продолжит со следующим ниже:

var fullid = people[i] + edit[i]
function edit(){
    nameValue = document.getElementById('newname').value;
    if(nameValue === ""){
      $('.nameinput').attr('style', "border-raidus: 5px; border:#C21414 1px solid;");
      $('#newname').attr('placeholder', "Ange nytt namn").placeholder();
    }else{
        people.splice(fullid, 1, nameValue);
        return listNames();
    }
}

Может быть, это очевидно или нет, но я думаю, что мой people.splice(fullid, 1, nameValue); является неправильным, номожет быть не так. Потому что в данный момент он редактирует только первый индекс моего массива, который равен Olle, когда я хочу отредактировать Lisa например.

Я надеюсь, что он достаточно ясен, чтобы понять мои мотивы. Я хотел бы решить это в JavaScript, но он также работает, если с JQuery.