The first and last names are placed in the object, and the object is placed in the array. This array is saved by localStorage. After the form, let the table contain the information from the local storage array.
const jsonForm = document.querySelector('.json'),
jsonInput = document.querySelector('.json-input'),
jsonOutPut = document.querySelector('.json-table'),
tdFirstname = jsonOutPut.querySelector('.first-name'),
tdSecondName = jsonOutPut.querySelector('.second-name'),
namesArr = [];
jsonForm.addEventListener('submit', (e) => {
e.preventDefault();
const splitted = jsonInput.value.split(' ');
let nameInput = splitted[0].charAt(0).toUpperCase() + splitted[0].slice(1);
let surnameInput = splitted[1].charAt(0).toUpperCase() + splitted[1].slice(1);
namesArr.sort();
namesArr.push(nameInput);
namesArr.push(surnameInput);
console.log(namesArr);
tdFirstname.append(namesArr[0]);
tdSecondName.append(namesArr[1]);
});
<form class="json">
<input type="text" class="json-input">
<button type="submit">Enter Your FullName</button>
</form>
<br><br>
<table class="json-table">
<tr>
<th>Name</th>
<th>Surname</th>
</tr>
<tr>
<td class="first-name"></td>
<td class="second-name"></td>
</tr>
</table>
Content is always written to the same existing nodes again, instead of creating new nodes per entry. Something like this should work (Codepen):
<form class="json">
<input class="json-input">
<button type="submit">Enter Your FullName</button>
</form>
<table class="json-table">
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
</tr>
</thead>
<tbody class="json-data"></tbody>
</table>
const addRowToTable = (str) => {
const splitted = str.split(' ');
const tr = document.createElement('tr');
const td1 = document.createElement('td');
const td2 = td1.cloneNode();
td1.innerText = splitted[0].charAt(0).toUpperCase() + splitted[0].slice(1);
tr.appendChild(td1);
if (splitted.length === 2) {
td2.innerText = splitted[1].charAt(0).toUpperCase() + splitted[1].slice(1);
}
tr.appendChild(td2);
document.querySelector('.json-data').appendChild(tr);
}
const form = document.querySelector('.json');
form.addEventListener('submit', (e) => {
e.preventDefault();
addRowToTable(document.querySelector('.json-input').value);
// save `document.querySelector('.json-input').value` to local storage
form.reset();
});
// read local storage and use `addRowToTable` function to add existing entries to the table