I am very new at "*jsp*" and "*jquery*", I think the code below should display a number on screen and increase it by one every 3 seconds, but after 2 or 3 repetitions it breaks and starts to show wrong numbers

```
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <script type="text/javascript" src="js/jquery-1.11.2.js"></script>
    <script type="text/javascript">
        var auto_refresh = setInterval(
                function () {
                    $('#load_me').load('index.jsp').fadeIn("fast");
                }, 3000); // autorefresh the content of the div after
        //every 3000 milliseconds(3sec)
    </script>
</head>
<body>
<%! int i = 0;%>
<div id="load_me">
    <%out.print(++i);%>
</div>
</body>
</html>

```

I even tried to show time instead of printing a number, but the same problem accrued :

```
<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="java.util.Date" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <script type="text/javascript" src="js/jquery-1.11.2.js"></script>
    <script type="text/javascript">
        var auto_refresh = setInterval(
                function () {
                    $('#load_me').load('index.jsp').fadeIn("fast");
                }, 3000); // autorefresh the content of the div after
        //every 3000 milliseconds(3sec)
    </script>
</head>
<body>
<div id="load_me">
    <%
        Date d = new Date();
        SimpleDateFormat sp = new SimpleDateFormat("hh:mm:ss");
        String t= sp.format(d);
        out.print(t);
    %>
</div>
</body>
</html>

```