Получите информацию и измените с помощью javascript

// preparation
var products = [
    { name: 'Коля', age: 30 },
    { name: 'Вася', age: 40 },
    { name: 'Петя', age: 50 },
];

var ul = document.createElement("ul");
document.body.appendChild(ul);

var inputAge = document.createElement("input");
// set input type as number
inputAge.setAttribute("type", "number");
var button = document.createElement("button");
button.innerHTML = "Change";
inputAge.style.display = "none";
button.style.display = "none";

document.body.appendChild(inputAge);
document.body.appendChild(button);
// preparation done

// set products to li
for (var i = 0; i < products.length; i++) {

    var li = document.createElement("li");
    setContent(li, products[i])
    ul.appendChild(li);
}

// function to set one li's content
function setContent(el, obj) {
    // rebuild the span
    var span = document.createElement("span");
    span.innerHTML = obj.name + " " + obj.age + " " + "Edit";
    // bind edit event handler
    span.addEventListener("click", editInfo);
    // reset li's content
    el.innerHTML = '';
    el.appendChild(span);
}

// what edit do
function editInfo(e) {
    // retrieve name&age
    var arr = e.target.innerHTML.split(' ');
    var name = arr[0].trim();
    var age = parseInt(arr[1]);
    // set text value to input
    inputAge.value = age;
    // show input and change button
    inputAge.style.display = "block";
    button.style.display = "block";
    
    // set change button here for easily get name
    button.onclick = function() {
      setContent(e.target, {
          name: name,
          age: inputAge.value
    })
    // hide input and button
    inputAge.style.display = "none";
    button.style.display = "none";
};
}

var products = [{
        name: 'Коля',
        age: 30
    },
    {
        name: 'Вася',
        age: 40
    },
    {
        name: 'Петя',
        age: 50
    }
];

loadList();

function loadList() {
    var listItem = '';

    for (var key in products) {
        listItem +=
            "<li onClick=editListData('" +
            products[key].name +
            "','" +
            products[key].age +
            "','" +
            key +
            "')>" +
            products[key].name +
            ' ,' +
            products[key].age +
            '</li>';
    }
    $('.userDataList').html(listItem);
}

function editListData(name, age, key) {
    var inputContainer = $('.inputContainer');
    var in_put = `<div>
                      <div class = "form-group">
                        <label for = "usr">Name:</label>
                    <input type = "text" value='${name}' class = "form-control" id = "usr" name = "usr">
                      </div><br/>
                      <div class = "form-group">
                       <label for = "age">Age:</label>
                  <input type = "text" value='${age}' class = "form-control" id = "age" name = "age">
                      </div><br/>
                      <button type = "button" onClick = "updateData('${key}')"class = "btn btn-primary">Primary</button>
                       </div>`;
    inputContainer.html(in_put);
}

function updateData(key) {
    var name = $('#usr').val();
    var age = $('#age').val();
    products[key] = {
        name: name,
        age: age
    };
    loadList();
    $('.inputContainer').html('');
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "myListData">
<ul class = "userDataList"></ul>
</div>
<div class = "inputContainer">
</div>

var products = [{
    name: 'Коля',
    age: 30
  },
  {
    name: 'Вася',
    age: 40
  },
  {
    name: 'Петя',
    age: 50
  },
];

showProducts();

function showProducts() {
  // Remove old #product UL if exists
  $('#products').remove();
  // Append UL
  $('body').append('<ul id = "products"></ul>');
  // Iterate over products
  products.forEach((elem, i) => {
    // Using ES6 Template Literals
    $('ul').append(`<li><span data-product-index = "${i}" onclick='editInfo(this);'>${elem.name} ${elem.age} Edit</span></li>`);
  });
}

function editInfo(elem) {
  // Remove old edit field
  $('#editField').remove();
  // Append an edit div
  $('body').append(`<div id = "editField">Editing Item: ${$(elem).data('product-index')}<br>Name:<br><input type = "text" id = "editInputName"/><br>Age:<br><input type = "number" id = "editInputAge"/><br><button id = "editButton">Change</button></div>`);

  $('button').on('click', (e) => {
    products[$(elem).data('product-index')].name = $('#editInputName').val();
    products[$(elem).data('product-index')].age = $('#editInputAge').val();

    console.info(products[$(elem).data('product-index')]);
    // Remove click event
    $('button').off('click');
    // Remove edit field
    $('#editField').remove();

    // Show updated object
    showProducts();
  });
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>