Hello guys, please I need a help on this

I am trying to collect data from user input to a table. I design a simple table and input boxes with html and use javascript to transfer the data but i am getting errors “Please you need to fill all fields to continue”. even when I have filled the boxes

here is the code.

**

Expense tracker list body{ background: #fff;

}
.tag {
background:#ccc;
width:100%;
height:150px;
font-size:20px;
transform: uppercase;
margin-top:30px;
padding-top:30px;
position: absolute;
justify-space: in-between;

}
#item {
width:19.35%;
height:auto;
background:pink;
float:left;
text-align:center;
font-size:10px;
border:1px solid black;
}

.item{
width:19.35%;
height:auto;
background:pink;
float:left;
text-align:center;
font-size:10px;
border:1px solid black;
}

.frame {
width:90%;
height:200px;
background:grey;
padding:10px;
border-radius:3px;
overflow-y:auto;
float:left;
position: relative;
color:#231ccb;

}

Expense Tracker

Item:


Quantity:


Price :


Date :


Add Item

Item Name
Quantity
Price
Amount
Date




Hello world

**

//this part is not allowed

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.190 Safari/537.36.

Challenge: Comment Your JavaScript Code

Link to the challenge:

could you link a codepen or sand box