JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<body>
	<div data-role="page">
			<div data-role="collapsible-set" data-theme="b" data-content-theme="d" id="mainColl">
    </div></div>
 </body>

JavaScript

$(document).ready(function () 
     {
        var ul=$("#mainColl");
        var collapsible= $('<div data-role="collapsible">');
		collapsible.append('<h2>Collapsible</h2>');
			
		var list = $('<ul data-role="listview" data-divider-theme="b">');
		list.append('<li data-role="list-divider">List</li>');
				
		for(var j =0;j<4;j++)
		{
			list.append("<li>Item</li>");
		}
		collapsible.append(list);
		ul.append(collapsible);
        ul.trigger('create');
     });

$("#mainColl").on("click","li",function()
    {
        var list = $("<ul>");
		for(var i=0;i<4;i++)
		{
			list.append("<li>test</li>");
		}
		$(this).append(list);
		//$(this).trigger('create');
        $(this).parent().listview('refresh');

	});