jQuery Mobile: header does not show correctly in calling page

Here is my HTML code

<div data-role="page" id="main-body">
    <div data-role="header">
        <!--<a href="#"><img src="img/back.png" width="30" height="30" class="ui-btn-left" /></a>-->
        <img src="img/share.png" width="30" height="30" class="ui-btn-right" />
        <h1>Hello world</h1>
    </div>
    
    <ul data-role="listview" data-inset="true">
        <li><a href="#asked-question-body">Acura</a></li>
        <li><a href="#">Audi</a></li>
        <li><a href="#">BMW</a></li>
        <li><a href="#">Cadillac</a></li>
        <li><a href="#">Ferrari</a></li>
    </ul>          
</div>

<div data-role="page" id="asked-question-body">
    <div data-role="header">
        <a href="#main-body"><img src="img/back.png" width="30" height="30" class="ui-btn-left" /></a>
    </div>
        
    <div data-role="main" class="ui-content">
        <div class="ui-body ui-body-a ui-corner-all">
            <h3>Heading</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan blandit fermentum. Pellentesque cursus mauris purus, auctor commodo mi ullamcorper nec. Donec semper mattis eros, nec condimentum ante sollicitudin quis. Etiam orci sem, porttitor ut tellus nec, blandit posuere urna. Proin a arcu non lacus pretium faucibus. Aliquam sed est porttitor, ullamcorper urna nec, vehicula lorem. Cras porttitor est lorem, non venenatis diam convallis congue.</p>
        </div>
    </div>
</div>

it shows id="main-body" header perfectly but id="asked-question-body" doesn't show its header correctly. I want to show its header perfectly as main-body page.

main-body screenshot is

and asked-question-body

Thanks in advance.

Add in asked-question-body page

<div data-role="header">
     <h1></h1>
     <a href="#main-body" class="ui-btn ui-btn-icon-notext ui-icon-btnback" data-icon="btnback"></a>
</div>

CSS

 <style>
    .ui-icon-btnback:after {
      background: url(back.png) 50% 50% no-repeat;         
    }
</style>