Jquery Mobile - Pre populating Select List with Data - jquery-mobile

Question

I am currently trying to create a basic heat timer function.I have six switches per day with hour, minutes and temperature. My knowledge is very limited and I am hacking and fudging things a lot from this site to help me move along.
The most basic way for me to create something with my limited programming knowledge is to use Jquery Mobile Select Widget.
I created it all via html successfully but my code was huge, with 24 hours in a day, Minutes are at 5 min intervals giving 12 minute options, and 35 temperature range options.
Once I had it working, I looked around for ways to then reduce the code size and repeat via JavaScript.
I found this http://jsfiddle.net/qsafmw5g/1/ which was excellent and helped me to realise how to load the data multiple times.
var data = [{"chapterId":1,"chapterName":"First"},{"chapterId":2,"chapterName":"Second"}];
$(data).each(function() {
var option = $('<option />');
option.attr('value', this.chapterId ).text(this.chapterName );
$('#comboChapters').append(option);
});
$('#comboChapters').selectmenu('refresh', true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<select name="comboChapters" id="comboChapters" data-native-menu="false">
</select>
I have since created my own code from this (still crude) but now my software is only loading the values in to the last switch (number 6) and leaving the other five switches blank.
I have tried to reduce my code to just show Mondays bank of six switches and remove my other things.
JSFiddle Here https://jsfiddle.net/adonegan/3yx2p7rf/
// Data Setup for Heater Controls
var hour_data = [{
"optionId": 0,
"optionValue": "00"
}, {
"optionId": 1,
"optionValue": "01"
}, {
"optionId": 2,
"optionValue": "02"
}, {
"optionId": 3,
"optionValue": "03"
}, {
"optionId": 4,
"optionValue": "04"
}, {
"optionId": 5,
"optionValue": "05"
}, {
"optionId": 6,
"optionValue": "06"
}, {
"optionId": 7,
"optionValue": "07"
}, {
"optionId": 8,
"optionValue": "08"
}, {
"optionId": 9,
"optionValue": "09"
}, {
"optionId": 10,
"optionValue": "10"
}, {
"optionId": 11,
"optionValue": "11"
}, {
"optionId": 12,
"optionValue": "12"
}, {
"optionId": 13,
"optionValue": "13"
}, {
"optionId": 14,
"optionValue": "14"
}, {
"optionId": 15,
"optionValue": "15"
}, {
"optionId": 16,
"optionValue": "16"
}, {
"optionId": 17,
"optionValue": "17"
}, {
"optionId": 18,
"optionValue": "18"
}, {
"optionId": 19,
"optionValue": "19"
}, {
"optionId": 20,
"optionValue": "21"
}, {
"optionId": 22,
"optionValue": "22"
}, {
"optionId": 23,
"optionValue": "23"
}];
var min_data = [{
"optionId": 0,
"optionValue": "00"
}, {
"optionId": 1,
"optionValue": "05"
}, {
"optionId": 2,
"optionValue": "10"
}, {
"optionId": 3,
"optionValue": "15"
}, {
"optionId": 4,
"optionValue": "20"
}, {
"optionId": 5,
"optionValue": "25"
}, {
"optionId": 6,
"optionValue": "30"
}, {
"optionId": 7,
"optionValue": "35"
}, {
"optionId": 8,
"optionValue": "40"
}, {
"optionId": 9,
"optionValue": "45"
}, {
"optionId": 10,
"optionValue": "50"
}, {
"optionId": 11,
"optionValue": "55"
}];
var temp_data = [{
"optionId": 0,
"optionValue": "0°c"
}, {
"optionId": 1,
"optionValue": "1°c"
}, {
"optionId": 2,
"optionValue": "2°c"
}, {
"optionId": 3,
"optionValue": "3°c"
}, {
"optionId": 4,
"optionValue": "4°c"
}, {
"optionId": 5,
"optionValue": "5°c"
}, {
"optionId": 6,
"optionValue": "6°c"
}, {
"optionId": 7,
"optionValue": "7°c"
}, {
"optionId": 8,
"optionValue": "8°c"
}, {
"optionId": 9,
"optionValue": "9°c"
}, {
"optionId": 10,
"optionValue": "10°c"
}, {
"optionId": 11,
"optionValue": "11°c"
}, {
"optionId": 12,
"optionValue": "12°c"
}, {
"optionId": 13,
"optionValue": "13°c"
}, {
"optionId": 14,
"optionValue": "14°c"
}, {
"optionId": 15,
"optionValue": "15°c"
}, {
"optionId": 16,
"optionValue": "16°c"
}, {
"optionId": 17,
"optionValue": "17°c"
}, {
"optionId": 18,
"optionValue": "18°c"
}, {
"optionId": 19,
"optionValue": "19°c"
}, {
"optionId": 20,
"optionValue": "21°c"
}, {
"optionId": 22,
"optionValue": "22°c"
}, {
"optionId": 23,
"optionValue": "23°c"
}];
$(hour_data).each(function() {
var option = $('<option />');
option.attr('value', this.optionId).text(this.optionValue),
$('#mon_hour_timer_one').append(option);
$('#mon_hour_timer_two').append(option);
$('#mon_hour_timer_three').append(option);
$('#mon_hour_timer_four').append(option);
$('#mon_hour_timer_five').append(option);
$('#mon_hour_timer_six').append(option);
});
$(min_data).each(function() {
var option = $('<option />');
option.attr('value', this.optionId).text(this.optionValue);
$('#mon_min_timer_one').append(option);
$('#mon_min_timer_two').append(option);
$('#mon_min_timer_three').append(option);
$('#mon_min_timer_four').append(option);
$('#mon_min_timer_five').append(option);
$('#mon_min_timer_six').append(option);
});
$(temp_data).each(function() {
var option = $('<option />');
option.attr('value', this.optionId).text(this.optionValue);
$('#mon_temp_range_one').append(option);
$('#mon_temp_range_two').append(option);
$('#mon_temp_range_three').append(option);
$('#mon_temp_range_four').append(option);
$('#mon_temp_range_five').append(option);
$('#mon_temp_range_six').append(option);
});
$('#mon_hour_timer_one').selectmenu('refresh', true);
$('#mon_hour_timer_two').selectmenu('refresh', true);
$('#mon_hour_timer_three').selectmenu('refresh', true);
$('#mon_hour_timer_four').selectmenu('refresh', true);
$('#mon_hour_timer_five').selectmenu('refresh', true);
$('#mon_hour_timer_six').selectmenu('refresh', true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<!-- Heating Controls & Settings Page -->
<div id="heating" data-role="page">
<div data-role="content">
<div class="ui-field-contain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Switch1:</legend>
<select name="mon_hour_timer_one" id="mon_hour_timer_one" data-mini="true"></select>
<select name="mon_min_timer_one" id="mon_min_timer_one" data-mini="true"></select>
<select name="mon_temp_range_one" id="mon_temp_range_one" data-mini="true"></select>
</fieldset>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Switch2:</legend>
<select name="mon_hour_timer_two" id="mon_hour_timer_two" data-mini="true"></select>
<select name="mon_min_timer_two" id="mon_min_timer_two" data-mini="true"></select>
<select name="mon_temp_range_two" id="mon_temp_range_two" data-mini="true"></select>
</fieldset>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Switch3:</legend>
<select name="mon_hour_timer_three" id="mon_hour_timer_three" data-mini="true"></select>
<select name="mon_min_timer_three" id="mon_min_timer_three" data-mini="true"></select>
<select name="mon_temp_range_three" id="mon_temp_range_three" data-mini="true"></select>
</fieldset>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Switch4:</legend>
<select name="mon_hour_timer_four" id="mon_hour_timer_four" data-mini="true"></select>
<select name="mon_min_timer_four" id="mon_min_timer_four" data-mini="true"></select>
<select name="mon_temp_range_four" id="mon_temp_range_four" data-mini="true"></select>
</fieldset>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Switch5:</legend>
<select name="mon_hour_timer_five" id="mon_hour_timer_five" data-mini="true"></select>
<select name="mon_min_timer_five" id="mon_min_timer_five" data-mini="true"></select>
<select name="mon_temp_range_five" id="mon_temp_range_five" data-mini="true"></select>
</fieldset>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Switch6:</legend>
<select name="mon_hour_timer_six" id="mon_hour_timer_six" data-mini="true"></select>
<select name="mon_min_timer_six" id="mon_min_timer_six" data-mini="true"></select>
<select name="mon_temp_range_six" id="mon_temp_range_six" data-mini="true"></select>
</fieldset>
</div>
</div>
</div>
I have played with the first jsfiddle and realised that will also not allow me to load multiple selects from that one function.
Would somebody be kind enough to help show me how my function can be made to work to populate all of my lists.

Answer 1

Welcome to dynamic page creation!
As you can see, when you have to repeat something in your code you know it can be done in another way. Here's mine:
HTML
<div id="heating" data-role="page">
<div data-role="content">
<div class="ui-field-contain" id="content">
</div>
</div>
</div>
JavaScript
$(document).on("pageinit", "#heating", function(event)
{
var switch_number = 6;
var html = "";
for (var s = 0; s != switch_number; s++)
{
html += '<fieldset data-role="controlgroup" data-type="horizontal">';
html += '<legend>Switch ' + s + ':</legend>';
html += '<select id="mon_hour_timer_' + s + '" data-mini="true">';
for (var h = 0; h != 24; h++)
html += '<option value="' + h + '">' + h + '</option>';
html += '</select>';
html += '<select id="mon_min_timer_' + s + '" data-mini="true">';
for (var m = 0; m != 60; m += 5)
html += '<option value="' + m + '">' + m + '</option>';
html += '</select>';
html += '<select id="mon_temp_range_' + s + '" data-mini="true">';
for (var t = 0; t != 24; t++)
html += '<option value="' + t + '">' + t + ' ° C</option>';
html += '</select>';
html += '</fieldset>';
}
$("#content").html(html);
$("#content").trigger("create");
});