Live iPhone Preview

Creating a live preview for an iPhone app builder.

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<h2>iPhone Live Preview</h2>

<p>What to do:
    <br />Hit the "Add Page" button below and fill out some content in the forms. Then create another page and add some different content. What I am trying to do is create some JS code so that as you enter content into the text box for a page, the text inside iframe-iphone changes as you type, and when you move to a new tab it changes to the text there. Can anyone help?</p>
<ul class="nav nav-tabs" id="tabHeaders">
    <li><a href="javascript:void(0);" id="createTab"><i class="icon-plus"></i>Add Page</a>

    </li>
    <!-- Tabs (Created by Javascript) -->
</ul>
<div class="tab-content" id="tabContent">
    <!-- Tab Content (Created by Javascript) -->
</div>
<div class="modal hide fade" id="previewDialog">
    <div class="modal-header">
        <button class="close" data-dismiss="modal">Ă—</button>
         <h3>Screen Preview</h3>

    </div>
    <div class="modal-body">
        <div id="pageTitle"></div>
        <div id="pageSubtitle"></div>
        <div id="pageContent"></div>
    </div>
</div>
<hr />
<div id="iphone-frame">
    <div id="iphone">
        <div id="iframe-iphone">
            <div id="titlePreview">
                <h1>Title</h1>
            </div>
            <div id="subtitlePreview">
                <h2>Subitle</h2>
            </div>
            <div id="contentPreview">
                <p>Content</p>
            </div>
        </div>
    </div>
    <div id="iphone-shadow"></div>
</div>

CSS

#iphone-frame {
    position: relative;
    width: 510px;
    height: 580px;
    margin-bottom: 10px float: right;
}
#iphone {
    position: relative;
    width: 380px;
    overflow: hidden;
    height: 742px;
    background: url('http://www.jansimecek.com/themes/stacker_html/images/iphone.png');
    z-index: 2;
    margin: 0 auto;
}
#iframe-iphone {
    width: 320px;
    height: 480px;
    overflow: hidden;
    margin-left: 31px;
    margin-top: 130px;
}
#iphone iframe {
    width: 320px;
    height: 480px;
}
#iphone-shadow {
    position: relative;
    top: -120px;
    left: 10px;
    z-index: 1;
    margin: 0 auto;
    width: 510px;
    height: 227px;
    background: url('http://www.jansimecek.com/themes/stacker_html/images/iphone_shadow.png') no-repeat;
}

JavaScript

var tabCount = 1;
$(function () {
    $('#createTab').click(function () {
        $('#tabHeaders')
            .append($('<li><a href="#tab' + tabCount + '" id="tablnk' + tabCount + '" data-toggle="tab">New Page ' + tabCount + ' <i class="icon-remove tab-remove"></i></a></li>'));
        $('#tabContent')
            .append($('<div class="tab-pane" id="tab' + tabCount + '"><div class="control-group"><label class="control-label" for="pageTitle_tab' + tabCount + '">Page Title</label><div class="controls"><input type="text" class="input-xlarge" id="pageTitle_tab' + tabCount + '"><p class="help-block">Enter the title for this page. It will appear in the menu and at the top.</p></div></div><div class="control-group"><label class="control-label" for="pageSubtitle_tab' + tabCount + '">Page Subtitle</label><div class="controls"><input type="text" class="input-xlarge" id="pageSubtitle_tab' + tabCount + '"><p class="help-block">Enter the subtitle for this page. It will be below the title.</p></div></div><div class="control-group"><label class="control-label" for="pageContent_tab' + tabCount + '">Page Content</label><div class="controls"><textarea class="input-xlarge" style="width:90%;resize:vertical;" id="pageContent_tab' + tabCount + '"></textarea><p class="help-block">Enter the content for this page. You can use the following HTML:<br /><small>&lt;strong&gt;&lt;/strong&gt; to make things bold<br />&lt;em&gt;&lt;/em&gt; to emphasize<br />&lt;ul&gt;&lt;li&gt; or &lt;ol&gt;&lt;li&gt; to make lists<br />&lt;h3&gt; or &lt;h4&gt; to make headings<br />&lt;pre&gt;&lt;/pre&gt; for code blocks<br />&lt;code&gt;&lt;/code&gt; for a few words of code<br />&lt;a&gt;&lt;/a&gt; for links<br />&lt;img&gt; to paste in an image (it will need to be hosted somewhere else though)<br />&lt;blockquote&gt;&lt;/blockquote&gt; to quote somebody</small></p></div></div><a class="btn" data-tc="' + tabCount + '"  id="open_previewDialog" href="#previewDialog">Preview Page</a></div>'));
       ...