JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css">
<html>
    <head>
    </head>
    <body>
        <div id="page" data-role="page">
            <!-- First field is done by jQM's normal initialization -->
            <!-- The Rest are added onload and appended to the listview -->
            <ul data-role="listview">
                <li>
                    <div data-role="fieldcontain">
                        <label for="textarea1">Input:</label>
                        <textarea id="textarea1" name="textarea1"></textarea>
                    </div>
                </li>
            </ul>
            <a data-role="button" id="add_element">Add Fields</a>
        </div>
    </body>
</html>

JavaScript

$('#add_element').click(function() {
    var list   = $('ul[data-role="listview"]');
    var nextLi = ((list.children().length) + 1);
    //alert('Next: '+nextLi);
    li = '<li><div data-role="fieldcontain"><label for="textarea'+nextLi+'">Input:</label><textarea id="textarea'+nextLi+'" name="textarea'+nextLi+'"></textarea></div></li>';
    list.append(li);
    list.listview('refresh');
    console.log(li);
    //$('#page').trigger('create');
});

//$('#add_element').hide();