JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>


<div data-role="page" id="list" data-theme="b" data-add-back-btn="true">
    <div data-role="header" data-theme="b">
         <a href="#" data-rel="back" data-transition="slide" data-theme="b" data-icon="arrow-l" class="ui-btn-left" >Back</a>
         <h1>List Page</h1>
    </div>
    
    <div data-role="content">
    <a href="#" id="addBttn" data-role="button">Add Nested List at Last</a>

    <ul id="newsListContent" data-role="listview" data-theme="a" data-dividertheme="a" data-inset="true">
    <li id="GENERAL" data-icon="false" data-theme="c">
        <a>GENERAL</a>
        <ul data-role="listview" data-inset="true" data-theme="d" data-dividertheme="a">
            <li data-icon="false" data-theme="a">GENERAL ITEM 1</li>
            <li data-icon="false" data-theme="a">GENERAL ITEM 2</li>
            <li data-icon="false" data-theme="a">GENERAL ITEM 2</li>
        </ul>
    </li>
    <li id="GENERAL" data-icon="false" data-theme="c">
        <a>CARDS</a>
        <ul data-role="listview" data-inset="true" data-theme="d" data-dividertheme="a">
            <li data-icon="false" data-theme="a">CARDS ITEM 1</li>
            <li data-icon="false" data-theme="a">CARDS ITEM 2</li>
            <li data-icon="false" data-theme="a">CARDS ITEM 3</li>
        </ul>
    </li>
    <li id="GENERAL" data-icon="false" data-theme="c">
        <a>FOOD</a>
        <ul data-role="listview" data-inset="true" data-theme="d" data-dividertheme="a">
            <li data-icon="false" data-theme="a">FOOD ITEM 1</li>
            <li data-icon="false" data-theme="a">FOOD ITEM 2</li>
            <li data-icon="false" data-theme="a">FOOD ITEM 3</li>
        </ul>
    </li>    
</ul>

</div>
</div>

CSS

#newsListContent
{
  margin:10px   
}

JavaScript

var i=1;
$('#addBttn').click(function() {

     // adding a LI with Nested List in Main List
     var li = '<li data-icon="false" data-theme="a">NEW '+i+'</li>';
     $('#newsListContent').append(li);

    var ul = '<ul data-role="listview" data-inset="true" data-theme="h" data-dividertheme="a" id="ul_'+i+'">'
                     + '<li data-icon="false" data-theme="b">'
                     + 'NEW ITEM '+i+'</li>'
                     + '<li data-icon="false" data-theme="b">'
                     + 'NEW ITEM '+i+'</li>'          
                 + '</ul>';   
    $('#newsListContent li:last').append(ul).trigger('create');

    $('#newsListContent').listview('refresh');

    i++;
});