I'm doing this for practice. I want to make a small app that keeps track of one's expenses. It contains two text inputs and one date input, apart from one button to add the value of each on screen. You write the place you spent money, the date and the amount of it and it shows up below as an unordered list plus a button to delete the entire entry.

How can I have an unordered list that contains three li items? I've tried creating multiple lis and append them to the list or to each other. It did work to an extent however the delete button only deleted the last input entry, the amount. If I appended it to the list it deleted the entire ul element so it could only be done once when trying it.

My code right now as I went back to where I started:

HTML

<div class="">
<input type="text" placeholder="Where was the expense made?" class="place">
<input type="date" class="date">
<input type="text" class="amount">
<input type="button" value="Add Expense" class="addBtn">
</div>
<ul class="list"></ul>

JS

function addStuff() {

const place = placeInput.value;
const date = dateInput.value;
const amount = amountInput.value;

const btn = document.createElement('button');
btn.type = 'button';
btn.textContent = 'X';
btn.addEventListener("click", (e) => deleteExpense(e));

const li = document.createElement('li');
li.textContent = `${place}`;
li.appendChild(btn);

list.appendChild(li);

}