I have a .net page, and I am using the bootstrap progress bara to display a value like such. 

```
 <div class="progress">
<div class="progress-bar progress-bar-striped active" id="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
progress    
</div>

```

Then, based on a predefined value (from database) we will set a value for progress bar, like so

```
function onload() {

        var value = 30; //assume later stage this value will come from database
        var interval = setInterval(function () {
            $("#progress-bar")
           .css("width", value + "%")
           .attr("aria-valuenow", value)
           .text(value + "%");
        }, 1000);
};

onload();

```

Then I want the user to be able to update the progress bar value. I have the input like such

```
 <div id="someDiv">
Update progress
</div>

 <br><br>

 <input id="someInput" type="text">
 <input type="button" value="Update" onClick="doStuff()">

<br>    

```

Then the javascript to update the progress bar value is as such

```
  function doStuff() {
        var nameElement = document.getElementById("someInput");
        var theName = nameElement.value;
        var value = theName;
        var interval = setInterval(function () {
            $("#progress-bar")
            .css("width", value + "%")
            .attr("aria-valuenow", value)
            .text(value + "%");
        }, 1000);
    }

```

But what is happening, once I hit the update button, the progress bar moves to 70%, then back to 30% then 70% etc. So it goes between the 2, so I am assuming the `<script>` keeps getting load again and again. 

any help?