How to calculate and distribute the result on html?

Question

I have two values on my html: "Money" and "Time", and those values come from Session Storage, depending on what the person filled previously on another html page. So lets say the person filled that they need to pay $100 in 2 days.

What i'm trying to do, is to create a list, showing the number of payments, with the amount to be paid in each payment. Like the example below

MONEY: $100 / TIME: 2 Days

RESULT:

$50

$50

So if the person has 5 days, instead of 2, it would appear as:

$20

$20

$20

$20

$20

What i have so far is:

HTML

<p id="money-value"></p>
<p id="time-value"></p>

<div id="payments"></div>

<script>

const displayMoney = document.getElementById("money-value");
const storedMoney = sessionStorage.getItem("Money");
window.addEventListener("load", () => {
displayMoney.innerHTML =  "Money: " + storedMoney
});

const displayTime = document.getElementById("time-value");
const storedTime = sessionStorage.getItem("Time");
window.addEventListener("load", () => {
displayTime.innerHTML =  "Time: " + storedTime
});

</script>

What i'm trying to do here, is to use Javascript to create a list element, inside the <div id="payments> that would not only calculate the amount to be paid in each payment, but also that the number of "topics" (payments) would increase, according to the number of "time" the person has (Just like the example i gave).

Answer 1

This might be the result you wanted. But I'm pretty sure that there are better ways to program this.

const displayMoney = document.getElementById("money-value");
const storedMoney = 100; //example
window.addEventListener("load", () => {
displayMoney.innerHTML =  "Money: " + storedMoney
});

const displayTime = document.getElementById("time-value");
const storedTime = 5;//example
window.addEventListener("load", () => {
displayTime.innerHTML =  "Time: " + storedTime
});
var calc = storedMoney / storedTime;

for (let i = 0; i < storedTime; i++) {
    var list = document.createElement("li");
    list.innerText = `${calc}`;
    document.body.appendChild(list);
}

    <p id="money-value"></p>
<p id="time-value"></p>

<div id="payments"></div>