JSFiddle - React, Tailwind, and code Playground

by Avi Algaly

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<div data-role="page" id="page1">
  <div data-role="header" data-position="fixed">
    <h1>hello</h1>
  </div>
  <div role="main" class="ui-content" id="targetContent">
    <div id="thelist" data-role="collapsibleset" data-theme="a" data-content-theme="a">
    </div>
  </div>
</div>

JavaScript

$(document).on("pagecreate", "#page1", function() {
  var liste = $('#thelist');
  var AllDynamicPages = '';
  $.each(daten.posts, function(index1, data) {
    var postid = data.id;
    var postTitle = data.title;
    var postContent = data.content;
    for (var i = 0; i < data.categories.length; i++) {
      var catid = data.categories[i].id;
      var catTitle = data.categories[i].title;
      //see if we already have this category, if not create new collapsible
      var $cat = $("#cat" + catid);
      if ($cat.length == 0) {
        $cat = $('<div id="cat' + catid + '" data-role="collapsible"><h3>' + catTitle + '</h3><ul data-role="listview"></ul></div>');
        liste.append($cat);
      }

      //create post link in category collapsible list
      var postlink = '<li><a href="#page' + postid + '">' + postTitle + '</a></li>';
      $cat.find("ul").append(postlink);

      AllDynamicPages += '<div data-role="page" data-add-back-btn="true" id="page' + postid + '"><div data-role="header"><h1>' + postTitle + '</h1></div><div data-role="content">' + postContent + '</div></div>'
    }
  });
  liste.enhanceWithin();
  $("body").append(AllDynamicPages);
});


var daten = {
  "status": "ok",
  "count": 10,
  "count_total": 20,
  "pages": 2,
  "posts": [{
      "id": 86,
      "type": "post",
      "slug": "inaktiviert",
      "url": "http://localhost/wordpress/?p=86",
      "status": "publish",
      "title": "Post 1 Cat1",
      "content": "his is content for Post1 Cat 1.",
      "date": "2014-03-04 15:09:51",
      "modified": "2014-03-04 15:09:51",
      "categories": [{
        "id": 1,
        "title": "Category 1",
        "description": "",
        "parent": 0,
        "post_count": 4
      }],
    },
    {
      "id": 84,
      "type": "post",
      "slug": "kann-nicht-aktualisiert-werden",
      "url": "http://localhost/wordpress/?p=84",
      "status": "publish",
      "title": "Post 2 Cat1",
      "content": "<p>This is content for Post2 Cat 1.</p>\n",
 ...