JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css">
<div data-role="page" id="home">
<div data-role="content">
<div id="addContent">
<p><input type="text" value="I want to copy you" data-theme="d" id="txtContent" /></p>
<p><input type="text" value="Try to look like me" data-theme="e" id="txtContent2" /></p>
<p>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose a Theme:</legend>
<input type="radio" name="theme-options" id="theme-option-a" value="a" checked="checked" data-theme="a" />
<label for="theme-option-a" data-theme="a">Theme A</label>
<input type="radio" name="theme-options" id="theme-option-b" value="b" data-theme="b" />
<label for="theme-option-b" data-theme="b">Theme B</label>
<input type="radio" name="theme-options" id="theme-option-c" value="c" data-theme="c" />
<label for="theme-option-c" data-theme="c">Theme C</label>
<input type="radio" name="theme-options" id="theme-option-d" value="d" data-theme="d" />
<label for="theme-option-d" data-theme="d">Theme D</label>
<input type="radio" name="theme-options" id="theme-option-e" value="e" data-theme="e" />
<label for="theme-option-e" data-theme="e">Theme E</label>
</fieldset>
</div>
</p>
<p><button id="btn1">Change theme</button></p>
<p><button id="btn2">View theme</button></p>
<!-- Add Dynamic content here -->
</div>
</div>
</div>
JavaScript
$("#btn1").click(function() {
$('#txtContent').attr('data-theme', 'e').removeClass('ui-body-d').addClass('ui-body-e').trigger('create');
});
$("#btn2").click(function() {
alert("Theme = " + $('#txtContent').attr('data-theme'));
});
$('input[name=theme-options]').change(function() {
var currentTheme = $('#txtContent').attr('data-theme');
var selectedTheme = $(this).val();
$('#txtContent').attr('data-theme',selectedTheme).removeClass('ui-body-'+currentTheme).addClass('ui-body-'+selectedTheme).trigger('create');
});