Creo que esto puede ayudarte: Primero declare una variable que usaremos como flag, antes de hacer el listener del boton.. o sea: $(document).ready(function () { let tableIsCreated = false; // Aquí creamos la variable para que no se resetee al presionar el botón $("#btnLoad").click(function () { ........ }} ________________________________________ Luego en la siguiente función, no estabas haciendo el append de lo generado en el contendor (tabla), quedaría así: function createRowUser(user, element) { const row = `<tr id="tr-${user.id}"> ${populateTableData( user.id, user.nombre, user.apellido, user.email, user.edad, user.dni, user.telefono )} </tr>`; $(element).append(row); } _____________________________ Finalmente aquí hacemos uso del flag para que no se cree cada vez que presionamos el botón una nueva tabla con su headers, se deja una sola y se cargan nuevos tr nada más. if (localStorage.getItem("users")) { if (!tableIsCreated) { createTable("body", "user-table"); createTableHeader( ["id", "nombre", "apellido", "email", "edad", "dni", "telefono"], "#user-table" ); tableIsCreated = true; } populateRows(getUserFromStorage("users"), "#user-table"); } _________________________ Como resultado final, cada vez que se ingresa un registro, se crea una fila en la tabla con los datos, con una única tabla y headers en HTML. _________________________________ Dejo por las dudas el código completo. $(document).ready(function () { let tableIsCreated = false; $("#btnLoad").click(function () { console.log($("#nombre").val()); console.log($("#apellido").val()); console.log($("#email").val()); console.log($("#edad").val()); console.log($("#id").val()); console.log($("#dni").val()); console.log($("#telefono").val()); console.log($("#ingresantes").val()); console.log($("#aplicantes").val()); const form = $("#formulario"); const inputName = $("#nombre"); const inputSurname = $("#apellido"); const inputEmail = $("#email"); const inputAge = $("#edad"); const inputId = $("#id"); const inputDni = $("#dni"); const inputPhone = $("#telefono"); // pronto usare esto para dar resultados sobre la compra de boletos // const inputIncoming = $("#ingresantes"); // const inputApplicants = $("#aplicantes"); //--------------------------------------------------------------- function User(id, nombre, apellido, email, edad, dni, telefono) { this.id = id; this.nombre = nombre; this.apellido = apellido; this.email = email; this.edad = edad; this.id = id; this.dni = dni; this.telefono = telefono; } let listUser = []; listUser = getUserFromStorage("users") || []; function saveToStorage(key, user) { listUser.push(user); localStorage.setItem(key, JSON.stringify(listUser)); } function getUserFromStorage(key) { if (localStorage.getItem(key)) { return JSON.parse(localStorage.getItem(key)); } } function createTable(element, id) { const table = `<table id=${id} class="tabla"></table>`; $(element).append(table); } function createDataHeader(data) { return data.map((headerData) => `<th> ${headerData} </th>`); } function createTableHeader(data, table) { const header = `<tr> ${createDataHeader(data)} </tr>`; $(table).append(header); } function populateTableData( id, nombre, apellido, email, edad, dni, telefono ) { return `<td class="celdas"> ${id} </td> <td class="celdas"> ${nombre} </td> <td class="celdas"> ${apellido} </td> <td class="celdas"> ${email} </td> <td class="celdas"> ${edad} </td> <td class="celdas"> ${dni} </td> <td class="celdas"> ${telefono} </td>`; } function createRowUser(user, element) { const row = `<tr id="tr-${user.id}"> ${populateTableData( user.id, user.nombre, user.apellido, user.email, user.edad, user.dni, user.telefono )} </tr>`; $(element).append(row); } function populateRows(data, element) { data.map((user) => { createRowUser(user, element); }); } if (localStorage.getItem("users")) { if (!tableIsCreated) { createTable("body", "user-table"); createTableHeader( ["id", "nombre", "apellido", "email", "edad", "dni", "telefono"], "#user-table" ); tableIsCreated = true; } populateRows(getUserFromStorage("users"), "#user-table"); } form.submit(function (event) { event.preventDefault(); const id = inputId.val(); const nombre = inputName.val(); const apellido = inputSurname.val(); const email = inputEmail.val(); const edad = inputAge.val(); const dni = inputDni.val(); const telefono = inputPhone.val(); const user = new User(nombre, apellido, email, edad, id, dni, telefono); if (!localStorage.getItem("users")) { createTable("body", "user-table"); createTableHeader([ "id", "nombre", "apellido", "email", "edad", "dni", "telefono", ]); saveToStorage("users", user); createRowUser(user, "#user-table"); } }); }); }); _________________________________ **Versión 2 completa:** **HTML** <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <div class="centrarFormulario"> <form id="formulario"> <label for="nombre">Nombre:</label> <input id="nombre" type="text" placeholder="Ingrese su nombre" /> <label for="apellido">Apellido:</label> <input id="apellido" type="text" placeholder="Ingrese su apellido" /> <label for="email">email:</label> <input id="email" type="email" placeholder="Ingrese su email" /> <label for="edad">Edad:</label> <input id="edad" type="number" placeholder="Ingrese su Edad" /> <label for="id">Id:</label> <input id="id" type="number" placeholder="Ingrese su n° de cliente en orden" /> <label for="dni">dni:</label> <input id="dni" type="number" placeholder="Ingrese su DNI" /> <label for="telefono">Telefono:</label> <input id="telefono" type="number" placeholder="Ingrese su Telefono" /> <label for="calle">Dirección:</label> <input id="Dirección" type="text" placeholder="Ingrese su Dirección" /> <h3>Ingrese los datos del pedido</h3> <label for="asistencia">Cantidad de ingresantes:</label> <input id="ingresantes" type="text" placeholder="Ingrese la cantidad" /> <label for="aplicantes">cantidad de ancianos y menores:</label> <input id="aplicantes" type="text" placeholder="Ingrese la cantidad" /> <button id="btnLoad" type="submit">Enviar</button> <button type="reset">Restablecer</button> </form> </div> <table> <thead id="tableHead"> <tr> <th>Id</th> <th>Nombre</th> <th>Apellido</th> <th>Email</th> <th>Edad</th> <th>DNI</th> <th>Teléfono</th> </tr> </thead> <tbody id="tableBody"></tbody> </table> <script src="app.js"></script> </body> </html> **JavaScript** (En un archivo app.js en misma carpeta que HTML) $(document).ready(function () { const tableBody = $("#tableBody"); const tableHead = $("#tableHead"); if (getUserFromStorage("users")) { drawTable(); } else { tableHead.hide(); } console.log($("#nombre").val()); console.log($("#apellido").val()); console.log($("#email").val()); console.log($("#edad").val()); console.log($("#id").val()); console.log($("#dni").val()); console.log($("#telefono").val()); console.log($("#ingresantes").val()); console.log($("#aplicantes").val()); const form = $("#formulario"); const inputName = $("#nombre"); const inputSurname = $("#apellido"); const inputEmail = $("#email"); const inputAge = $("#edad"); const inputId = $("#id"); const inputDni = $("#dni"); const inputPhone = $("#telefono"); allInputs = document.querySelectorAll("input"); // pronto usare esto para dar resultados sobre la compra de boletos // const inputIncoming = $("#ingresantes"); // const inputApplicants = $("#aplicantes"); //--------------------------------------------------------------- function User(id, nombre, apellido, email, edad, dni, telefono) { this.id = id; this.nombre = nombre; this.apellido = apellido; this.email = email; this.edad = edad; this.id = id; this.dni = dni; this.telefono = telefono; } let listUser = []; if (getUserFromStorage("users")) { listUser = getUserFromStorage("users"); } function saveToStorage(key, user) { listUser.push(user); localStorage.setItem(key, JSON.stringify(listUser)); } function getUserFromStorage(key) { if (localStorage.getItem(key)) { return JSON.parse(localStorage.getItem(key)); } } function drawTable() { for (const user of getUserFromStorage("users")) { tableHead.show(); tableBody.append(`<tr> <td>${user.id}</td> <td>${user.nombre}</td> <td>${user.apellido}</td> <td>${user.email}</td> <td>${user.edad}</td> <td>${user.dni}</td> <td>${user.telefono}</td> </tr>`); } } form.submit(function (event) { event.preventDefault(); const id = inputId.val(); const nombre = inputName.val(); const apellido = inputSurname.val(); const email = inputEmail.val(); const edad = inputAge.val(); const dni = inputDni.val(); const telefono = inputPhone.val(); const user = new User(id, nombre, apellido, email, edad, dni, telefono); saveToStorage("users", user); //Guardo user en storage tableBody.empty(); //Borro el tbody de la tabla drawTable(); //Dibujo tabla actualizada //Pongo todos los input en blanco tras agregar a la tabla y storage. for (const input of allInputs) { input.value = ""; } }); }); ___________________________________________________________ Agregué también que se muestre u oculte el header de la tabla si hay o no datos en la Storage, también que todos los inputs se pongan en blanco tras agregar a la tabla y localStorage. Espero sirva para resolver tu problema, estoy a las ordenes, buena jornada!