How to make the textbox reset except the specific one in HTML using JavaScript

I'm trying to make the textbox reset after clicking the submit button but the textbox is not resetting I already create a function that it should reset but it's not working can you help me fix this here's the Javascript code, I tried adding a reset form function but the textbox has still value of the last data i inserted

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var selectedRow = null;
var nextId = 1;
// Set the initial value of the ID textbox
document.getElementById("id").value = nextId;
function onFormSubmit(e) {
event.preventDefault();
var formData = readFormData();
if (selectedRow === null) {
insertNewRecord(formData);
} else {
updateRecord(formData);
}
resetForm();
}
function readFormData() {
var formData = {};
formData["id"] = nextId.toString();
formData["email"] = document.getElementById("email").value;
formData["last"] = document.getElementById("last").value;
formData["first"] = document.getElementById("first").value;
formData["mobile"] = document.getElementById("mobile").value;
formData["location"] = document.getElementById("location").value;
return formData;
}
function insertNewRecord(data) {
var table = document.getElementById("employeeList").getElementsByTagName('tbody')[0];
var newRow = table.insertRow(table.length);
var cell1 = newRow.insertCell(0);
cell1.innerHTML = data.id;
var cell2 = newRow.insertCell(1);
cell2.innerHTML = data.last;
var cell3 = newRow.insertCell(2);
cell3.innerHTML = data.first;
var cell4 = newRow.insertCell(3);
cell4.innerHTML = data.email;
var cell5 = newRow.insertCell(4);
cell5.innerHTML = data.mobile;
var cell6 = newRow.insertCell(5);
cell6.innerHTML = data.location;
var cell7 = newRow.insertCell(6);
cell7.innerHTML = `
<a href="#" onClick='onEdit(this)'><i class="far fa-pen"></i></a>
<a href="#" onClick='onDelete(this)'><i class="far fa-trash-alt"></i></a>
`;
nextId++;
document.getElementById("id").value = nextId;
data["id"] = nextId.toString();
}
function onEdit(td) {
selectedRow = td.parentElement.parentElement;
document.getElementById("id").value = selectedRow.cells[0].innerHTML;
document.getElementById("last").value = selectedRow.cells[1].innerHTML;
document.getElementById("first").value = selectedRow.cells[2].innerHTML;
document.getElementById("email").value = selectedRow.cells[3].innerHTML;
document.getElementById("mobile").value = selectedRow.cells[4].innerHTML;
document.getElementById("location").value = selectedRow.cells[5].innerHTML;
}
function updateRecord(formData) {
selectedRow.cells[0].innerHTML = formData.id;
selectedRow.cells[1].innerHTML = formData.last;
selectedRow.cells[2].innerHTML = formData.first;
selectedRow.cells[3].innerHTML = formData.email;
selectedRow.cells[4].innerHTML = formData.mobile;
selectedRow.cells[5].innerHTML = formData.location;
}
function onDelete(td) {
if (confirm('Are you sure you want to delete this record?')) {
row = td.parentElement.parentElement;
document.getElementById('employeeList').deleteRow(row.rowIndex);
resetForm();
}
}
function resetForm() {
document.getElementById('id').value = '';
document.getElementById('last').value = '';
document.getElementById('first').value = '';
document.getElementById('email').value = '';
document.getElementById('mobile').value = '';
document.getElementById('location').value = '';
selectedRow = null;
}

<!-- language: lang-css -->

body {
zoom: .6;
padding: 50px;
background-image: linear-gradient(to right, #ffb0bc, #ffc2a0);
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* .container {
display: flex;
} */
.h1 {
color: black;
font-size: x-large;
font-family: Arial, Helvetica, sans-serif;
}
.flex {
display: flex;
width: 100%;
}
form {
padding: 20px;
}
.flex2 {
display: flex;
width: 100%;
}
.h2 {
color: #5C5455;
font-size: medium;
margin-top: 0%;
font-family: Arial, Helvetica, sans-serif;
}
td i {
padding: 7px;
color: #fff;
border-radius: 50px;
}
.fa-pen {
background: #FAD15D;
border-radius: 7px;
margin: 5px;
justify-items: center;
}
.fa-trash-alt {
background: #D86059;
border-radius: 7px;
margin: 5px;
justify-items: center;
}
/* .div1 {
width: 65%;
float: left;
} */
.div2 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-color: #EAEFF2;
width: 380px;
border-style: solid;
border-radius: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
margin: 20px;
padding: 50px;
border-width: 1px;
color: #5C5455;
}
.head {
text-align: center;
margin-bottom: 20px;
color: #5C5455;
}
table {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #EAEFF2;
padding: 10px;
height: 50px;
}
th {
font-weight: normal;
}
form label {
display: block;
margin-bottom: 5px;
}
form input[type="location"] {
width: 90%;
padding: 10px;
margin-bottom: 10px;
background-color: #FABFA3;
border: 1px solid #EAEFF2;
border-radius: 8px;
}
form input[name="mobile"] {
width: 90%;
padding: 10px;
margin-bottom: 10px;
background-color: #FABFA3;
border: 1px solid #EAEFF2;
border-radius: 8px;
}
form input[name="id"] {
width: 80%;
padding: 10px;
margin-bottom: 10px;
background-color: #FABFA3;
border: 1px solid #EAEFF2;
border-radius: 8px;
}
form input[type="last"],
form input[type="first"],
form input[type="email"] {
width: 80%;
padding: 10px;
margin-bottom: 10px;
background-color: #FABFA3;
border: 1px solid #EAEFF2;
border-radius: 8px;
}
.input-container {
display: flex;
flex-direction: column;
}
input[type="submit"] {
background-color: #2C89B9;
color: #fff;
border: none;
padding: 10px 20px;
width: 97%;
border-radius: 8px;
cursor: pointer
}
.head1 {
margin-top: 90px;
text-align: center;
opacity: 40%;
}
span {
color: red;
}

<!-- language: lang-html -->

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<div class="container">
<div class="div1">
<h1 class="h1">Daily Activities</h1>
<h2 class="h2">June 2023</h2>
<table class="list" id="employeeList">
<thead>
<tr>
<th>ID</th>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Mobile Number</th>
<th>Location</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="div2">
<p class="head">Please fill-up a new form to add a new application entry.<br>entry</p>
<form onsubmit="event.preventDefault();onFormSubmit();" autocomplete="off">
<div class="flex">
<div class="input-container">
<label for="id">ID no:</label>
<input type="number" id="id" name="id"><br>
</div>
<div class="input-container">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br>
</div>
</div>
<div class="flex2">
<div class="input-container">
<label for="last">Last Name:</label>
<input type="last" id="last" name="last" required><br>
</div>
<div class="input-container">
<label for="first">First Name:</label>
<input type="first" id="first" name="first" required><br>
</div>
</div>
<div class="input-container">
<label for="mobile">Mobile Number:</label>
<input type="number" id="mobile" name="mobile" required><br>
</div>
<div class="input-container">
<label for="location">Location:</label>
<input type="location" id="location" name="location" required><br>
</div>
<input type="submit" value="Create">
<p class="head1"><span>?</span>make sure that you add the correct information.</p>
</form>
</div>
</div>

<!-- end snippet -->

The next proposed main fixes are a reminder that any HTMLFormElement can be accessed via the forms-collection like ... document.forms[<integer|formName>] ... and also does provide access to most of its controls / form-elements via its elements-collection and each control's collection-index or element-name.

This mostly makes a form-element's id attribute obsolete, especially in case one does nest each form-element inside its related <label/>-element.

Secondly, any form-element features its own reset-method. As for the OP's case, one just does let this method take care of resetting any of the form's element-values.

At third, a form-element's readonly-attribute does give the OP full control over the id- respectively nextId-management. One just has to make setting this value part of the OP's resetForm functionality.

In addition to having fixed some input-element's broken type-attribute values and some markup improvements, the CSS got slightly changed as well.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function readFormData() {
const formData = {};
const formElements = document.forms[0].elements;
formData.id = formElements.id.value;
formData.email = formElements.email.value;
formData.last = formElements.last.value;
formData.first = formElements.first.value;
formData.mobile = formElements.mobile.value;
formData.location = formElements.location.value;
return formData;
}
function insertNewRecord(formData) {
const table = document.getElementById("employeeList").getElementsByTagName('tbody')[0];
const newRow = table.insertRow(table.length);
newRow.insertCell(0).textContent = formData.id;
newRow.insertCell(1).textContent = formData.last;
newRow.insertCell(2).textContent = formData.first;
newRow.insertCell(3).textContent = formData.email;
newRow.insertCell(4).textContent = formData.mobile;
newRow.insertCell(5).textContent = formData.location;
newRow.insertCell(6).innerHTML = `
<a href="#" onClick='onEdit(this)'><i class="far fa-pen"></i></a>
<a href="#" onClick='onDelete(this)'><i class="far fa-trash-alt"></i></a>
`;
++nextId;
}
function updateRecord(formData) {
selectedRow.cells[0].textContent = formData.id;
selectedRow.cells[1].textContent = formData.last;
selectedRow.cells[2].textContent = formData.first;
selectedRow.cells[3].textContent = formData.email;
selectedRow.cells[4].textContent = formData.mobile;
selectedRow.cells[5].textContent = formData.location;
}
function onEdit(td) {
const formElements = document.forms[0].elements;
selectedRow = td.parentElement.parentElement;
formElements.id.value = selectedRow.cells[0].textContent;
formElements.last.value = selectedRow.cells[1].textContent;
formElements.first.value = selectedRow.cells[2].textContent;
formElements.email.value = selectedRow.cells[3].textContent;
formElements.mobile.value = selectedRow.cells[4].textContent;
formElements.location.value = selectedRow.cells[5].textContent;
}
function onDelete(td) {
if (confirm('Are you sure you want to delete this record?')) {
row = td.parentElement.parentElement;
document.getElementById('employeeList').deleteRow(row.rowIndex);
resetForm();
}
}
function onFormSubmit(e) {
e.preventDefault();
const formData = readFormData();
if (selectedRow === null) {
insertNewRecord(formData);  
} else {
updateRecord(formData);
}
resetForm();
}
function resetForm() {
const elmForm = document.forms[0];
selectedRow = null;
elmForm.reset();
elmForm.elements.id.value = nextId;
}
let selectedRow;
let nextId = 1;
// reset form initially which also ...
// - initializes `selectedRow` and
// - sets the initial ID form element value.
resetForm();

<!-- language: lang-css -->

body {
zoom: .6;
padding: 50px;
background-image: linear-gradient(to right, #ffb0bc, #ffc2a0);
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* .container {
display: flex;
} */
.h1 {
color: black;
font-size: x-large;
font-family: Arial, Helvetica, sans-serif;
}
.h2 {
color: #5C5455;
font-size: medium;
margin-top: 0%;
font-family: Arial, Helvetica, sans-serif;
}
table {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #EAEFF2;
padding: 10px;
height: 50px;
}
th {
font-weight: normal;
}
td i {
padding: 7px;
color: #fff;
border-radius: 50px;
}
.fa-pen {
background: #FAD15D;
border-radius: 7px;
margin: 5px;
justify-items: center;
}
.fa-trash-alt {
background: #D86059;
border-radius: 7px;
margin: 5px;
justify-items: center;
}
/* .div1 {
width: 65%;
float: left;
} */
.div2 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-color: #EAEFF2;
width: 380px;
border-style: solid;
border-radius: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
margin: 20px;
padding: 50px;
border-width: 1px;
color: #5C5455;
}
.head {
text-align: center;
margin-bottom: 20px;
color: #5C5455;
}
.head1 {
margin-top: 90px;
text-align: center;
opacity: 40%;
color: red;
}
.flex {
display: flex;
width: 100%;
}
.input-container {
display: flex;
flex-direction: column;
}
form {
padding: 20px;
}
form .input-container {
display: flex;
flex-direction: column;
}
form label > span {
display: block;
margin-bottom: 5px;
}
form input:not([type="submit"]) {
width: 80%;
padding: 10px;
margin-bottom: 10px;
background-color: #FABFA3;
border: 1px solid #EAEFF2;
border-radius: 8px;
}
form input[name="mobile"],
form input[name="location"] {
width: 90%;
}
input[type="submit"] {
background-color: #2C89B9;
color: #fff;
border: none;
padding: 10px 20px;
width: 97%;
border-radius: 8px;
cursor: pointer
}

<!-- language: lang-html -->

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<div class="container">
<div class="div1">
<h1 class="h1">Daily Activities</h1>
<h2 class="h2">June 2023</h2>
<table class="list" id="employeeList">
<thead>
<tr>
<th>ID</th>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Mobile Number</th>
<th>Location</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="div2">
<p class="head">Please fill-up a new form to add a new application entry.<br>entry</p>
<form onsubmit="onFormSubmit(event);" autocomplete="off">
<div class="flex">
<label class="input-container">
<span>ID no:</span>
<input type="text" name="id" readonly />
</label>
<label class="input-container">
<span>Email:</span>
<input type="email" name="email" required />
</label>
</div>
<div class="flex">
<label class="input-container">
<span>Last Name:</span>
<input type="text" name="last" required />
</label>
<label class="input-container">
<span>First Name:</span>
<input type="text" name="first" required />
</label>
</div>
<label class="input-container">
<span>Mobile Number:</span>
<input type="number" name="mobile" required />
</label>
<label class="input-container">
<span>Location:</span>
<input type="text" name="location" required />
</label>
<input type="submit" value="Create">
<p class="head1"><span>?</span>make sure that you add the correct information.</p>
</form>
</div>
</div>

<!-- end snippet -->

you could set the text box value to an empty string.

<div>
<input type="text" name="" id="Text">
<button onclick="submit()" type="submit">submit</button>
</div>
var Text_box = document.getElementById("Text")
var empty_value = ""
console.log(Text_box.value)
function submit() {
Text_box.value = empty_value 
}

You should add type="text"

<div class="input-container">
<label for="last">Last Name:</label>
<input type="text" id="last" name="last" required><br>
</div>
<div class="input-container">
<label for="first">First Name:</label>
<input type="text" id="first" name="first" required><br>
</div>
<div class="input-container">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br>
</div>

By using the correct input types, the resetForm() function should work as expected and reset the values of the fields.