Untitled

In jquery-mobile how do you programmically add page elements that have all the css?
<!DOCTYPE html>
<html>
<head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
</head>
<body>
    <div id="thelists" data-role="page">

        <div data-role="header">
            <h1>My Title</h1>
        </div><!-- /header -->
        <div data-role="content">
            <h3>Add List</h3>
            <form>
                <div data-role="controlgroup"  id="addwhat">
                    <input type="text" name="inp0" class="inp" />
                </div>
                <div data-role="controlgroup" data-type="horizontal" class="aisubmit">
                    <input type="submit" data-theme="b" id="addinput" value="Add Input"/>
                </div>
             </form>
        </div><!-- /content -->
    </div><!-- /page -->
    <script>
    var ct =0;
    $('body').on('click', "#addinput", function (e) {
        ct++;
        e.stopImmediatePropagation();
        e.preventDefault();
        //to add form elemnt you have to add all the class css stuff
        //$('#addwhat').append('<input type="text" name="list' + ct + '" class="inp ui-input-text ui-body-c ui-corner-all ui-shadow-inset" />');
        $('#addwhat').append('<input type="text" name="list' + ct + '"/>');
    });
    </script>
</body>
</html>

$('#thelists').trigger('create');