i want to update an array with an input field, but instead it creates a new one

Question

i want to update my array by typing what it needs to be updated to in an input field. but instead of updating it creates a new number. How do i fix this?

Whats it like before i changed it (console to the right)

After it changes (console to the right)

Here's the code:

function appendInputs(param) {
  param = param || '';
  var inputfield = $('div.words div div div input.inputrule').last();

  if (inputfield.length == 0) {
    var amount = 0;
  }
  else {
    var amount = inputfield.data('id') + 1;
  }
  //De vakjes van Cms.php
  var html = '<div class="change"> <div class="col-md-2"> <input type="number" value='+mp3[param-1]+' class="form-control" id="inp' + result + '" oninput="magic(this.id)"></div> </div> <div class="form-group exerciserule" id="' + amount + '"> \
                <div class="col-xs-10"><input id="exercise_details_rule' + amount + '" name="rules" data-id="' + amount + '" class="form-control inputrule" value="' +nummer_text[param-1]+ '" type="text"> \
              </div> </div>';
  result++;


  //append html
  $('#textList').append(html);

  $('#exercise_details_rule' + amount).focus();
} 

function magic(id) {
  var solo = document.getElementById(""+ id +"").value;

  var string = id;
  var index = string.slice(string.length - 1, string.length);
  //mp3[value] = solo;
  mp3.push(solo);
  console.log(mp3);
}

Answer 1

try this:

string.slice(string.length - 1, 1, string.length);

this will delete the last element and add a new element to the end of the array

But i'm not sure to have understood what you need...