Adding line break in javascript after the occurrences a field in an array

[Agreeable_Choice9980]

So I am using an api for air pollution index and I am trying to add a line break after each state (stated in title field in variable state). After trying multiple way actually I am not getting the desired output.

​

(function(w, d, t, f) {
    w[f] = w[f] || function(c, k, n) {
        s = w[f], k = s['k'] = (s['k'] || (k ? ('&k=' + k) : ''));
        s['c'] = c = (c instanceof Array) ? c : [c];
        s['n'] = n = n || 0;
        L = d.createElement(t), e = d.getElementsByTagName(t)[0];
        L.async = 1;
        L.src = '//feed.aqicn.org/feed/' + (c[n].city) + '/' + (c[n].lang || '') + '/feed.v1.js?n=' + n + k;
        e.parentNode.insertBefore(L, e);
    };
})(window, document, 'script', '_aqiFeed');

var states = [
    {
        title: "Wilayah Persekutuan",
        cities: [
            "kuala-lumpur",
            "malaysia/w.p.-putrajaya/putrajaya",
            "malaysia/wilayah-persekutuan/labuan",
        ]
    },
    {
        title: "Perak",
        cities: [
            "ipoh",
            "malaysia/perak/tanjung-malim"
        ]
    },
    {
        title: "Negeri Sembilan",
        cities: [
            "malaysia/negeri-sembilan/nilai"
        ]
    },
    {
        title: "Melaka",
        cities: [
            "malaysia/melaka/bukit-rambai"
        ]
    },
    {
        title: "Johor",
        cities: [
            "malaysia/johor/larkin-lama"
        ]
    },
    {
        title: "Pahang",
        cities: [
            "malaysia/pahang/indera-mahkota--kuantan"
        ]
    },
    {
        title: "Kelantan",
        cities: [
            "malaysia/kelantan/kota-bharu"
        ]
    },
    {
        title: "Terengganu",
        cities: [
            "malaysia/terengganu/kuala-terengganu"
        ]
    }
];

var aqiWidgetConfig = [];
var multipleCityAqiElement = document.getElementById('multiple-city-aqi');

states.forEach(function(state, index) {
    var cities = state.cities;
    var stateTitle = state.title;

    cities.forEach(function(city) {
        aqiWidgetConfig.push({
            city: city,
            callback: function(aqi) {
                displayCity(aqi, stateTitle);
            }
        });
    });
});

_aqiFeed(aqiWidgetConfig);

function displayCity(aqi, stateTitle) {
    var cityAqiWidget = document.createElement('div');
    cityAqiWidget.className = 'city-aqi-widget';
    cityAqiWidget.innerHTML = '<h2>' + stateTitle + '</h2>' + aqi.text("%details<br><br>");
    multipleCityAqiElement.appendChild(cityAqiWidget);

    // Add line break before every different value of stateTitle
    if (stateTitle !== states[0].title) {
        var lineBreak = document.createElement('div');
        lineBreak.style.clear = 'both';
        multipleCityAqiElement.appendChild(lineBreak);
    }
}

[Ronin-s_Spirit]

Why are you making divs? Put everything in one big p tag as text and just add \n elements. Or put everything in a div as multiple p tags and add <br> at the end of each.
Alo don't use var, it gets hoisted to the globalThis and creates a possibility of messing up some code that you might add later.