title: Dynamically adding collapsible divs by looping through array elements with JavaScript
body: <p>I am trying to use JavaScript to loop through an array and append collapsible divs to a collapsible set div. I had it working and but not sure what happened. I searched stackoverflow but wasn't able to find an direct answer. I also used the console and I can get each value in the array to appear in the console.</p>
  
  <p>I'm trying to get each day of the week to appear so users can click on the day to see a list of times. Currently, my code causes only monday to appear as a heading that can then be clicked on and expanded. When it is expanded, it shows the rest of the days of the week. I'm guessing that there is something wrong the order of how I'm doing things.</p>
  
  <p>Here is my javascript code:</p>
  
  <pre><code>$(document).on("pagebeforeshow","#ClassTimes",function(){
    $("#classList").empty();
    var collapsibleSet = $("#classList");
    var collapsible = $('&lt;div data-role="collapsible"&gt;&lt;/div&gt;');
    for (i=0; i&lt;showPrice.length; i++) {
      var maki = showPrice[i].day;
      collapsible.append("&lt;h2&gt;" + maki + "&lt;/h2&gt;");
    }
    collapsibleSet.append(collapsible);
    collapsibleSet.trigger('create');
  });
  </code></pre>
  
  <p>With this code, what I currently see is Monday with a plus sign, when I click Monday, it expands and I see the rest of the days of the week. What I want is to have each day of the week as an expandable div.</p>
  
  <p>Here is a link so you can see what I mean. <a href="http://mbsk8.zerogravity-web.com/index-x.html#ClassTimes" rel="nofollow">http://mbsk8.zerogravity-web.com/index-x.html#ClassTimes</a></p>