Dynamic nested collapsible set based on dynamic section in jquery mobile - jquery-mobile

Question

I follow this answer for creating collapsible set. now I want to create nested collapsible set. I have a json like:
[
{
"sid": "26",
"tour_name": "4",
"day": "2",
"time": "16:00",
"main_location": "Madurai",
"sub_location": "Mahal",
"site_link": "www.maduraimahal.com",
"description": "test"
},
{
"sid": "25",
"tour_name": "4",
"day": "2",
"time": "13:00",
"main_location": "Trichy",
"sub_location": "Rockport",
"site_link": "www.rockport.com",
"description": "Test"
},
{
"sid": "24",
"tour_name": "4",
"day": "2",
"time": "12:00",
"main_location": "Madurai",
"sub_location": "Temple",
"site_link": "www.madurai.com",
"description": "Test "
},
{
"sid": "17",
"tour_name": "4",
"day": "1",
"time": "09:00",
"main_location": "Chennai",
"sub_location": "City Centre",
"site_link": "www.wikipedia.com",
"description": "test"
},
{
"sid": "16",
"tour_name": "4",
"day": "1",
"time": "08:00",
"main_location": "Chennai",
"sub_location": "Spencer Plaza",
"site_link": "www.spencer.com",
"description": "test"
},
{
"sid": "15",
"tour_name": "4",
"day": "1",
"time": "07:00",
"main_location": "Chennai",
"sub_location": "Express Avenue",
"site_link": "www.wikipedia.com",
"description": "test"
}]
From this json I want to create collapsible set like following type
day-->First collapsiple
---main_location-- >second collapsiple
---sublocation-->listview
Exmaple
day 1
--Chennai
---expressavenue
---Spencer Plaza
---City Centre
day 2
--Trichy
---Rockfort
-- Madurai
---Mahal
---Temple
I am trying following method but can't group like this
$(document).on('pageshow', '#itienary', function (event, ui) {
$.getJSON('url', function (data) {
var collapsible = [];
var days = [];
var collapsible1 = [];
var mainlocation = [];
$.each(data, function (i, v) {
collapsible.push(v.day);
$.each(collapsible, function (i, v) {
if ($.inArray(v, days) === -1) {
days.push(v);
days.sort();
}
});
});
$.each(days, function (j, main) {
var day = main;
var locations = '';
$.each(data, function (k, val) {
var mainloc = val.main_location;
if (val.day == day) {
collapsible1.push(mainloc);
}
$.each(collapsible1, function (i, v) {
if ($.inArray(v, mainlocation) === -1) {
mainlocation.push(v);
mainlocation.sort();
}
});
});
$.each(mainlocation, function (i, loc) {
var parent = loc;
var elements = '';
$.each(data, function (x, sub) {
var subLoc = sub.sub_location;
var time = sub.time;
var sitelink = sub.site_link;
if (sub.main_location == parent) {
elements += '<li><h2>' + subLoc + '</h2><p><strong>' + time + '</strong></p><p class="ui-li-aside"><strong>Sitelink: ' + sitelink + '</strong></p></a></li>';
}
});
$("#itinerary-list").append($("<div/>", {
"data-role": "collapsible",
"data-iconpos": "left",
"data-collapsed-icon": "arrow-d",
"data-expanded-icon": "arrow-u",
"class": day
}).append($("<h3/>").text("Day " + day)).appendTo($("<div/>"), {
"data-role": "collapsible",
"data-iconpos": "left",
"class": parent
}).append($("<h3/>").text(parent)).append($("<ul/>", {
"data-role": "listview",
"data-theme": "b"
}).append(elements).listview()));
$('#itinerary-list').collapsibleset('refresh');
});
});
});
});
How can I done this?