JSFiddle - React, Tailwind, and code Playground

by mariellel

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">

   <ul id="liste" data-role="listview">
       
        </ul>
    
    </div>
</div>

JavaScript

$(document).on("pagecreate", "#page1", function(){
    var liste = $('#liste');
    
    var AllListItems = '';
    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;            
            AllListItems += '<li><a href="#page' + postid + '">' + postTitle + '</a></li>';    
            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.empty().append(AllListItems).listview("refresh");
    $("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",
        "date": "2014-03-04 15:09:25",
        "modified": "2014-03-04 15:09:25",
        "categories": [
            {
                "id":...