如何在JQM中为不同的页面制作带有页码的标题

我有一个类似4个页面的表单，其中有多个页面和弹出窗口。

我想做的是在标题下面添加一个标题类型的东西，它将显示当前页面的编号，突出显示或箭头指示其当前页面。

我的网站是基于JQM的，所以我试着把我能做的弄得一团糟。

JSFIDDLE

这里有一个与之相关的小提琴。谁能帮我设计一下这个?

更新小提琴

Thanks in advance

<div data-role="page" id="page1">
    <div data-role="header">
            <h1>Click</h1>
    </div>
    <!-- /header -->
    <div role="main" class="ui-content">
        <p> <a data-role="button" href="#foo" class="clicko" id="1">Venta</a>
 <a data-role="button" href="#foo" class="clicko" id="2">Aliquilar</a>
 <a data-role="button" href="#foo" class="clicko" id="3">Busca</a>
        </p>
    </div>
</div>
<!-- Start of first page -->
<div data-role="page" id="foo">
    <div data-role="header"> <a class="ui-btn ui-icon-carat-l ui-btn-icon-notext ui-corner-all" data-direction="reverse" href="#page1">Back to page "one"</a>
            <h1 id="pagem"></h1>
    </div>
    <!-- /header -->
    <div role="main nopad " class="ui-content" style="padding-left: 0 !important;padding-right: 0 !important;padding-top: 0 !important; ">
        <div class="tracker ui-btn ui-grid-c center" style="border-top-width: 1px; padding: 0px; margin-bottom: 0px;">
            <div class="ui-block-a"><a class=" center1 ui-shadow ui-btn ui-corner-all ui-icon-arrow-l ui-btn-icon-notext ui-btn-inline">Button</a>
                <div class="line" style="margin-left:62%"></div>
            </div>
            <div class="ui-block-b"><a class=" center1 ui-shadow ui-btn ui-corner-all ui-icon-arrow-l ui-btn-icon-notext ui-btn-inline">Button</a>
                <div class="line" style="margin-right:62%"></div>
                <div class="line" style="margin-left:62%"></div>
            </div>
            <div class="ui-block-c"><a class="center1 ui-shadow ui-btn ui-corner-all ui-icon-arrow-l ui-btn-icon-notext ui-btn-inline">Button</a>
                <div class="line" style="margin-right:62%; top:-21px"></div>
                <div class="line" style="margin-left:62%"></div>
            </div>
            <div class="ui-block-d"><a class="center1 ui-shadow ui-btn ui-corner-all ui-icon-arrow-l ui-btn-icon-notext ui-btn-inline">Button</a>
                <div class="line" style="margin-right:62%;top:-21px"></div>
            </div>
        </div>
        <p>I'm Second in the source order so I'm shown as the page.</p>
        <p>View internal page called <a href="#bar">bar</a>
        </p>
    </div>
    <!-- /content -->
    <div data-role="footer">
            <h4>Page Footer</h4>
    </div>
    <!-- /footer -->
</div>

.line {
    width: 40%;
    bottom: 22px;
    position: relative;
    border-bottom: 1px solid #333333;
}
.center {
    text-align: center !important;
}