You need to move your array outside of the function. Each time you call the function, you are recreating the array with only one item.

I would separate the model from the view. Each time you add a product to the array, re-render what is in the array.

const
  nameInput = document.querySelector('input[name="product"]'),
  addButton = document.querySelector('#add'),
  nameArea  = document.querySelector('.nameArea');

const products = [];

const render = () => {
  nameArea.innerHTML = '';
  products.forEach(product => {
    const newProduct = document.createElement('li');
    newProduct.textContent = product;
    nameArea.appendChild(newProduct)
  });
}

const handleAdd = (e) => {
  products.push(nameInput.value);
  nameInput.value = '';
  render();
};

document.querySelector('#add').addEventListener('click', handleAdd);

<input name="product" />
<button id="add">Add</button>
<ul class="nameArea"></ul>

Everytime you call the getinnerText function, a new arr variable is created. After the function is executed, the array will not longer available.

The solution is to move the const arr = [] out from the function declaration like such:

const arr = []
function getinnerText() {
    const newProduct = document.createElement("li");
    newProduct.textContent = `${name}`;
    document.querySelector(".nameArea").appendChild(newProduct)
    arr.push(name)
}

You can declare const arr = [] outside from the function getinnerText. So you can get every names you have entered. Otherwise you create an new array every function call.

const arr = []
function getinnerText() {
    const newProduct = document.createElement("li");
    newProduct.textContent = `${name}`;
    document.querySelector(".nameArea").appendChild(newProduct)
    arr.push(name)
}

Hope solve the issue :)