Refreshing JS code to display correct data on screen
<p>I'm using script below to countdown from given time and display how many hours+minutes+seconds left for timeout on the script in real-time.</p>

<p>Counting down woks perfectly fine but the problem I'm facing is, when using <strong>next</strong> and <strong>previous</strong> buttons on browsers, the time doesn't get refreshed and I see old time instead. It either shows previous time or later.</p>

<p>I'm aware that <strong>next</strong> and <strong>previous</strong> buttons on browsers don't refresh pages but how can I overcome this issue?</p>

<p><strong>JS</strong></p>

<pre><code>function timeout_warning(login_timeout)
{
    var counter = 0;
    var total_seconds = 0;
    var colour = '';
    var interval_id = '';

    interval_id = setInterval(function ()
    {
        counter++;

        total_seconds = login_timeout - counter;
        hours = parseInt(total_seconds / 3600 ) % 24;
        minutes = parseInt(total_seconds / 60 ) % 60;
        seconds = parseInt(total_seconds % 60, 10);

        remaining = (hours &lt; 10 ? "0" + hours : hours) + ":" + (minutes &lt; 10 ? "0" + minutes : minutes) + ":" + (seconds  &lt; 10 ? "0" + seconds : seconds);

        if (minutes == 0 &amp;&amp; seconds == 0)
        {
            document.getElementById('font_timeout').innerHTML = 'Timeout';
            window.clearInterval(interval_id);
        }
        else
        {
            document.getElementById('font_timeout').innerHTML = remaining + 'sec';
        }
    }, 1000);
}
</code></pre>

<p><strong>HTML BODY</strong></p>

<pre><code>&lt;body onload="timeout_warning('1800')"&gt;
</code></pre>
