JSFiddle - React, Tailwind, and code Playground
HTML
<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/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>Inputs</h1>
<a href="#dynamic-inputs" data-icon="arrow-r" data-iconpos="right" class="ui-btn-right">To Dynamic Inputs Page</a>
</div>
<div data-role="content">
<p>
<label for="text-input">Text input:</label>
<input type="text" name="text-input" id="text-input" value="" placeholder="Enter text" />
</p>
<p>
<label for="number-input">Number input:</label>
<input type="number" name="number-input" id="number-input" value="" placeholder="Enter number" />
</p>
<p>
<label for="email-input">Email input:</label>
<input type="email" name="email-input" id="email-input" value="" placeholder="Enter email" />
</p>
<p>
<label for="url-input">Url input:</label>
<input type="url" name="url-input" id="url-input" value="" placeholder="Enter URL" />
</p>
<p>
<label for="tel-input">Tel input:</label>
<input type="tel" name="tel-input" id="tel-input" value="" placeholder="Enter phone number" />
</p>
<p>
<!-- add class="ui-hidden-accessible" -->
<label for="search-input">Search input:</label>
<input type="search" name="search-input" id="search-input" value="" placeholder="Search" />
</p>
<p>
<label for="textarea">Textarea:</label>
<textarea cols="40" rows="5" name="textarea" id="textarea" placeholder="Textarea"></textarea>
</p>
<div data-role="footer" data-position="fixed">
<h1>fotter</h1>
</div>
</div>
</div>
<div data-role="page" data-add-back-btn="true"...
JavaScript
$('#dynamic-inputs').live('pageinit', function () {
$('#create-button').click(function () {
$('<input type="text" name="text-input[]" id="text-input" value="" class="dynamic-textbox" placeholder="Enter text"/>')
.insertAfter('#create-button')
.textinput({
create: function () {
console.log('Creating new button...');
}
});
});
$('#disable-button').click(function () {
$('.dynamic-textbox').textinput('disable');
});
$('#enable-button').click(function () {
$('.dynamic-textbox').textinput('enable');
});
});