I have a simple two page website developed using jQuery mobile framework. I had the need to use Datebox plugin for selection of times. Both pages of my website are in the same .php file separated by divs with `data-role="page"` appropriately. 

My only problem is that if the datebox exists in the first page of the webpage, it loads properly, but in any other page, its icons are messed up.

```
<!DOCTYPE html> 
<html> 
<head> 
    <title>Home</title> 
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <link href="http://cdn.jtsage.com/jtsage-datebox/4.1.1/jtsage-datebox-4.1.1.jqm.min.css" rel="stylesheet" type="text/css">
    <script src="http://cdn.jtsage.com/jtsage-datebox/4.1.1/jtsage-datebox-4.1.1.jqm.min.js" type="text/javascript"></script>

</head> 
<body> 

    <div data-role="page" id="index">
        <header data-role="header" data-position="fixed">
            <h1>Home</h1>
        </header>

        <div data-role="main" class="ui-content">
            <div class="ui-field-contain">
                <label for="datebox">Time (seconds)</label>
                <input type="text" data-role="datebox" data-options='{"mode":"calbox"}'>
            </div>
        </div>

        <footer data-role="footer" data-position="fixed" style="text-align:center;" class="ui-body-a">
            <div data-role="navbar">
                <ul>
                    <li><a href="#index" data-direction="reverse" class="ui-btn ui-icon-plus ui-btn-icon-left ui-btn-active ui-state-persist">Home</a></li>
                    <li><a href="#onoff" class="ui-btn ui-icon-plus ui-btn-icon-left">ON/OFF</a></li>
                    <li><a href="#timer" class="ui-btn ui-icon-plus ui-btn-icon-left">Timer</a></li>
                    <li><a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Scheduler</a></li>
                </ul>
            </div>
        </footer> 
    </div>

    <div data-role="page" id="onoff">
        <header data-role="header" data-position="fixed">
            <h1>ONOFF</h1>
        </header>

        <div data-role="main" class="ui-content">

            <div class="ui-field-contain">
                <label for="datebox">Time (seconds)</label>
                <input type="text" data-role="datebox" data-options='{"mode":"calbox"}'>
            </div>
        </div>

        <footer data-role="footer" data-position="fixed" style="text-align:center;" class="ui-body-a">
            <div data-role="navbar">
                <ul>
                    <li><a href="#index" class="ui-btn ui-icon-plus ui-btn-icon-left">Home</a></li>
                    <li><a href="#onoff" data-direction="reverse" class="ui-btn ui-icon-plus ui-btn-icon-left ui-btn-active ui-state-persist">ON/OFF</a></li>
                    <li><a href="#timer" class="ui-btn ui-icon-plus ui-btn-icon-left">Timer</a></li>
                    <li><a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Scheduler</a></li>
                </ul>
            </div>
        </footer>

    </div>

</body>
</html>

```

The following images show the issue. On page load, the first div with `page-role="page"` and `id="index"` is loaded and the datebox icon works as intended:

[![Home Page](https://i.stack.imgur.com/eV5mr.png)](https://i.stack.imgur.com/eV5mr.png)

But if I navigate to the second page using the footer navbar ON/OFF tab, I get this weird icon placement:

[![ON/OFF page](https://i.stack.imgur.com/MAPJG.png)](https://i.stack.imgur.com/MAPJG.png)

Please help me figure out what is going wrong here.