Expense tracker code confusion

not getting the desired output and unable to find mistake .Please help me. here is my code:

html

<title>Expense tracker</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">

<link rel="stylesheet"  href="expense-tracker.css">
Expense tracker
Add Expense
Expenses
Amount Category Date Note
Amount: Category: Food Travel Groceries Entertainment Others
			</select>
		</span>
		<span>
			<label for="date">Date:</label>
			<input type="text" class="form-input" name="date" placeholder="dd-mm-yy">
		</span>
		<span>
			<label for="note">Note:</label>
			<input type="text" class="form-input" name="note" placeholder="what did you spend on?">
		</span>
		<span>
			<a href="#" class="buttons" style="font-size:15px;padding: 8px 10px;" onclick="add_expense()">Submit</a>
		</span>
	</form>
</div>
	<div class="Category">
		<a href="#" class="buttons" onclick="add_category_page()">Add Category</a>
	<br>
	<div class="sub-title">
	Categories
</div>
	<div class="available-categories">
		<span>Food <span class="sum"></span></span>
		<span>Travel <span class="sum"></span></span>
		<span>Groceries <span class="sum"></span></span>
		<span>Entertainment <span class="sum"></span></span>
		<span>Others <span class="sum"></span></span>
	</div>
	<form action="#" class="add-category">
		<span>
			<label for="category">Category Name:</label>
			<input type="text" name="new-category" class="form-input" placeholder="Enter category name">
		</span>
		<span>
	    <a href="#" class="buttons"  onclick="add_category()">Submit</a>
	</span>
</form>
   </div>
</div>

my css code
body{
box-sizing: border-box;
margin: 0;
padding: 0;
font-family:‘Open sans’,sans-serif;
}
.full_body{
font-size: 18px;
background-image: linear-gradient(to right top,#1b92ac,#00aeb2,#00c7a3,#6fdd83,#c1ec5f);
height: 800px;
}
.title{
color: white;
font-size:30px ;
display: flex;
justify-content:center ;
align-items: center;
padding: 30px;
}
.container{
dispaly: flex;
justify-content: space-between;
margin:100px;
}
.buttons{
outline:none ;
padding:10px 20px ;
border:none ;
color:white ;
background-color:rgb(233,60,60);
text-decoration:none ;
font-family:‘Open sans’,sans-serif;
font-size: 18px;
border-radius:4px ;
}
table{
background-color: rgba(0, 0, 0, 0.164);
color:white ;
margin-top:30px ;
border:1px solid white ;
font-family:‘Open sans’,sans-serif;
border-radius: 4px;
}
td{
font-size: 15px;
}
.add-new-expense,.add-category{
margin-top:10px ;
background-color:rgb(175,224,41) ;
border-radius: 4px;
padding: 10px;
display:none ;
border:1px solid grey ;
}
.add-new-expense span, .add-category span{
margin:5px 0px ;
font-size:15px ;
justify-content:space-between ;
align-items:center ;
display:flex ;
}
.form-input{
color:white;
background-color:rgba(0, 0, 0, 0.164) ;
border-radius: 4px;
padding: 8px 10px;
font-family:‘Open sans’,sans-serif;
border:1px solid white ;
}
.form-input:focus{

background-color:rgba(0, 0, 0, 0.164);
font-family:'Open sans',sans-serif;
border:1px solid white ;	
outline: none;

}

.available-categories{
display: flex;
justify-content: center;
align-items: center;
background-color:rgba(0, 0, 0,0.164) ;
padding: 15px;
flex-direction: column;
border:1px solid white ;
color: white;
font-size: 18px;
border-radius: 4px;
}
.available-categories > span{
justify-content:space-between;
align-items: center;
padding: 8px 10px;
border-bottom: 1px soid white;
display: flex;
}
.sub-title{
margin-top: 30px;
color: white;
font-size: 23px;
}

my javascript code

let expense_per_category=[0,0,0,0,0];
var count=4;

update_sum();

function update_sum(){
var sum = document.querySelectorAll(" .sum")
for(var i=0;i<sum.length;i++){
sum[i].innerHTML=" - "+expense_per_category[i]+“Rs. spent”;
}
}
function add_expense(){
var amount = document.getElementsByClassName(“form-input”)[0].value;
var date = document.getElementsByClassName(“form-input”)[2].value;
var note = document.getElementsByClassName(“form-input”)[3].value;
var category = document.getElementsByClassName(“form-input”)[1].selectedIndex;
var selected = document.getElementsByTagName(“option”)[category].value;

if(amount && date && note && selected){
alert(“successfull added expense!”);
var table = document.getElementsByTagName(“table”)[0];
var new_row = document.createElement(“tr”);
new_row.innerHTML = <tr style=border-bottom:1px solid white;> <td>${amount}</td> <td>${selected}</td> <td>${note}</td> <td>${date}</td> </tr> ;
table.appendChild(new_row);
expense_per_category[category] = parseInt(expense_per_category[category])+parseInt(amount);
update_sum();
console.log(count);
document.getElementsByClassName(“add-new-expense”)[0].getElementsByClassName.display=“none”;

}
else{
alert(“please enter all details!”)
}
}
function add_category(){
var new_category_value=document.getElementsByName(“new-category”)[0].value;
if(new_category_value){
var dropdown = document.getElementsByName(“category”)[0];
var available_categories = document.getElementsByClassName(“available-categories”)[0];
var new_category_option=document.createElement(“option”);
new_category_option.innerHTML = <option>${new_category_value}</option>;
count++;
expense_per_category[count]=0;
var new_category_span=document.createElement(“span”);
new_category_span.innerHTML=<span>${new_category_value}<span class="sum"> - ${new_category_value[count]}Rs spent</span></span>;
dropdown.appendChild(new_category_option);
available_categories.appendChild(new_category_span);
document.getElementsByClassName(“add-category”)[0].getElementsByClassName.style.display=“none”;

}

}
function add_category_page(){
if(document.getElementsByClassName(“add-category”)[0].style.display == “block”){
document.getElementsByClassName(“add-category”)[0].style.display =“none”;
}
else{
document.getElementsByClassName(“add-category”)[0].style.display = “block”;
}
}
function add_expense_page(){
if(document.getElementsByClassName(“add-new-expense”)[0].style.display == “block”){
document.getElementsByClassName(“add-new-expense”)[0].style.display =“none”;
}
else{
document.getElementsByClassName(“add-new-expense”)[0].style.display =“block”;
}
}

this is the output

@21je0663 It is difficult to pinpoint the code you have posted. Rather than the full code, please share the screenshots of how you want the page to be, and how it appears with your code. It would be easy to match the output that way. Also, based on that it can be pinpointed to see which code is behaving not as expected.