JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

</head>
<body>
	<div data-role="page" id="page1">
		<div data-role="header">
	        <h1>Header</h1>
		</div>
		<div data-role="content">	
			<a href="#" data-role="button" id="btn1">Add a message</a>

			<div data-role="collapsible" id="sendmessTMlist" data-collapsed="false" data-theme="e" data-content-theme="c">
			    <h3>Select A Message</h3>
			    <div data-role="collapsible" id="mymessages" data-collapsed="false" data-theme="c" data-content-theme="c">
			        <h3>My Messages</h3>

			    </div>
			</div>

		</div>
	</div>
	<script>
	$(document).on("pageinit", "#page1", function(){
		var messageid = 1;
		
		$(document).on("click", "#btn1", function(){
			
			var message = "My Message";
			var html = 
				'<div data-role="content">' + message + ' ' + messageid + '<br>' +
				//'<p>' + message + ' ' + messageid + '</p>' +
			    '<p><input data-inline="true" data-role="button" id="messageid' + messageid + '" type="button" value="Insert" class="buttlink" />' + 
			    '</div>';
			$("#mymessages div.ui-collapsible-content").append(html);
			$("#mymessages").trigger("create");
			messageid++;
		});
	});
	</script>
</body>
</html>