I am facing an issue with my form where the details entered by the user are supposed to be saved as a row beneath the table, but they are getting saved above the heading of the table.
Here is the HTML code for the table:
//Form to be filled
<form id="expense-form" action="" method="POST">
<h2>Form to add expenses</h2>
<div class="form-row">
<div class="form-group col-md-6">
<label for="description">Budget description:</label>
<input type="text" id="description" class="form-control" placeholder="Add description" />
</div>
<div class="form-group col-md-6">
<label for="category">Category:</label>
<select id="category" name="category">
<option value="Rent">Rent</option>
<option value="EMI">EMI</option>
<option value="Groceries">Groceries</option>
<option value="Bills">Bills</option>
<option value="Others">Others</option>
</select>
</div>
<div class="form-group col-md-6">
<label for="expense-amount">Amount:</label>
<input type="number" id="expense-amount" class="form-control" placeholder="Add amount" />
</div>
<div class="form-group col-md-6">
<label for="date">Expense date:</label>
<input type="date" id="date" class="date" placeholder="Add date of the expense" />
</div>
</div>
<button type="submit" id="add-btn" class="btn btn-primary">Submit</button>
</form>
<!--The list of expenses-->
<table id= "expense-table" class="table table-striped mt-5">
<thead id="expense-table-head">
<tr>
<th>Expense description</th>
<th>Category</th>
<th>Amount</th>
<th>Expense Date</th>
<th></th>
</tr>
</thead>
<tbody id="expense-list-display"></tbody>
</table>
The javascript function causing this issue is:
function addExpensetoList() {
var expenseDesc = document.getElementById("description").value;
var expenseCategory = document.getElementById("category").value;
var expenseAmount = document.getElementById("expense-amount").value;
var expenseDate = document.getElementById("date").value;
var table = document.getElementById("expense-table");
var row = table.insertRow(0);
var descCell = row.insertCell(0);
var categoryCell = row.insertCell(1);
var amountCell = row.insertCell(2);
var dateCell = row.insertCell(3);
descCell.innerHTML = expenseDesc;
categoryCell.innerHTML = expenseCategory;
amountCell.innerHTML = expenseAmount;
dateCell.innerHTML = expenseDate;}
After submitting the data through the form, it appears like this: https://i.sstatic.net/64vuB.png
I have been trying to figure out what I am doing wrong here. Can someone help me troubleshoot this issue?