JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>

<div data-title="First Page Title" data-role="page" id="zero">
    <div data-role="content">
        <a data-role="button" href="#one">Go to Next Page</a>
    </div>
</div>
<div data-title="Second Page Title" data-role="page" id="one">
    <div data-role="content">
        <a data-role="button" href="#zero">Go to Previous Page</a>
    </div>
</div>

JavaScript

var myHeaderHTML = '<div data-role="header" data-id="my-header" data-position="fixed"><h1>{TITLE}</h1></div>';
$(document).on('pagecreate', '[data-role="page"]', function () {
    var title = $(this).data('title') || 'Some Generic Title';
    $(this).append(myHeaderHTML.replace('{TITLE}', title));
});