Q:

Looping Child arrayList in Parent ArrayList

Problem

I need to create an invoice using pure javascript
Input(Checkbox) have ID's and Values

<input type="checkbox" id="2Tier" value="950"/>

When user clicks $("input[type=checkbox]"), $(this) gets the id and value and sets them to $selectedWeddingCake and $price and then passes them as an array

$selectedWeddingCake = [$weddingCake, $price, $total];

then push this list into the invoice list

$ListItem.push($selectedWeddingCake);

now my problem is that i need to create an invoice that displays all the selected cakes.
my for for loop hangs when i call it to display just one item

My for Loop
for (i = 0; i <= $ListItem.length; i += 1) {

    for (j = 0; i <= $selectedWeddingCake.length; j += 1) {
        document.getElementById("demo").innerHTML = "<br>Item: " + $selectedWeddingCake[i] + "<br>Price: " + $selectedWeddingCake[i] + "<br>Total: " + $selectedWeddingCake[i];
    }
}

ListItem[0]-->selectedWeddingCake[$weddingCake, $price, $total];

Desired loop output

The selected Cake is $weddingCake
The price is $price
The Total is $total

A:

You didn't change a letter in the second index:
for (i = 0; i <= $ListItem.length; i += 1) {

    for (j = 0; j <= $selectedWeddingCake.length; j += 1) {
        document.getElementById("demo").innerHTML = "<br>Item: " + $selectedWeddingCake[i] + "<br>Price: " + $selectedWeddingCake[i] + "<br>Total: " + $selectedWeddingCake[i];
    }
}

The condition is j <= $selectedWeddingCake.length;, not i <= $selectedWeddingCake.length;
Cheers

