Nested DOM Generation Bug

Question

I am trying to use the Bulma Flexbox plugin to generate tiles for each set of data I pull from a REST API. I'm generating tiles that lay horizontally in threes, with each row stacking on top of another. The Bulma documentation details how the hierarchy is supposed to work, but the class names are pretty self-descriptive.

I managed to make loops in Javascript that do all of the DOM manipulation correctly. The tiles are layed out how I want, but each row of tiles displays the same content. I am out of ideas on how to fix this. I was made aware that I should not be declaring variables inside a loop, but I want this to function first. Here is the function I am using:

"dataDiv" is: <div id="data" class="tile is-ancestor is-vertical"></div>

function createTileLayout() {

    for(var i = 0; i < earthquakesObject.features.length; i++) {

        var dataDiv = document.getElementById("data");
        var parentDiv = document.createElement("DIV");
        parentDiv.className = "tile is-parent";

        for(var count = 0; count < 3; count++) { 
            //creating child div for flexbox
            var childDiv = document.createElement("DIV");
            childDiv.className = "tile is-4 is-child box";

            //Creating elements
            var titleHeader = document.createElement("H2");
            var magnitudeElement = document.createElement("P");
            var locationElement = document.createElement("P");
            var tsunamiElement = document.createElement("P");
            var urlElement = document.createElement("P");
            var anchorElement = document.createElement("A");
            anchorElement.href = 
            earthquakesObject.features[i].properties.url; 

            //create text nodes for each property
            var title = document.createTextNode("Earthquake " + (i + 
                enter code here1));
            var magnitude = document.createTextNode("Magnitude: " + 
                earthquakesObject.features[i].properties.mag);
            var location = document.createTextNode("Location: " + 
                earthquakesObject.features[i].properties.place);
            var tsunami = document.createTextNode("There" + wasTsunami() 
                + "a tsunami warning with this earthquake.");
            var link = document.createTextNode("Link to the USGS page on 
                the earthquake.");

            //appending text nodes
            titleHeader.appendChild(title);        
            magnitudeElement.appendChild(magnitude);
            locationElement.appendChild(location);
            tsunamiElement.appendChild(tsunami);
            anchorElement.appendChild(link);
            urlElement.appendChild(anchorElement);

            //appending elements to child div
            childDiv.appendChild(titleHeader);
            childDiv.appendChild(magnitudeElement);
            childDiv.appendChild(locationElement);
            childDiv.appendChild(tsunamiElement);
            childDiv.appendChild(urlElement); 
            parentDiv.appendChild(childDiv);
        }
        dataDiv.appendChild(parentDiv);
    } 
}

A live version of the site can be found here: https://odocoileus.github.io/earthquake-app/ (Sorry about the atrocious styling). Thanks!

Answer 1

I fixed the issue, this is the code I used.

function createTileLayout() {
            for(var i = 0; i < earthquakesObject.features.length;) {
             //Create 3 tiles in the parent element
                var dataDiv = document.getElementById("data");
                var parentDiv = document.createElement("DIV");
                var titleHeader, magnitudeElement, locationElement, tsunamiElement,
                    urlElement, anchorElement, title, magnitude, location, tsunami, 
                    link, childDiv;

                parentDiv.className = "tile is-parent";

                for(var count = 0; count < 3; count++, i++) { 
                    //creating child div for flexbox
                    childDiv = document.createElement("DIV");
                    childDiv.className = "tile is-4 is-child box";

                    //Creating elements
                    titleHeader = document.createElement("H2");
                    magnitudeElement = document.createElement("P");
                    locationElement = document.createElement("P");
                    tsunamiElement = document.createElement("P");
                    urlElement = document.createElement("P");
                    anchorElement = document.createElement("A");
                    anchorElement.href = earthquakesObject.features[i].properties.url; 

                    //create text nodes for each property
                    title = document.createTextNode("Earthquake " + (i + 1));
                    magnitude = document.createTextNode("Magnitude: " + earthquakesObject.features[i].properties.mag);
                    location = document.createTextNode("Location: " + earthquakesObject.features[i].properties.place);
                    tsunami = document.createTextNode("There" + wasTsunami() + "a tsunami warning with this earthquake.");
                    link = document.createTextNode("Link to the USGS page on the earthquake.");

                    //appending text nodes
                    titleHeader.appendChild(title);        
                    magnitudeElement.appendChild(magnitude);
                    locationElement.appendChild(location);
                    tsunamiElement.appendChild(tsunami);
                    anchorElement.appendChild(link);
                    urlElement.appendChild(anchorElement);

                    //appending elements to child div
                    childDiv.appendChild(titleHeader);
                    childDiv.appendChild(magnitudeElement);
                    childDiv.appendChild(locationElement);
                    childDiv.appendChild(tsunamiElement);
                    childDiv.appendChild(urlElement); 
                    parentDiv.appendChild(childDiv);

                }
        dataDiv.appendChild(parentDiv);
    }   
}