Insert jQuery with script to change elements

Question

I am inserting HTML into my webpage and want to change some of the elements with jQuery. The file is being read every second and this is the element that I want to change:

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

I tried the following (didn't work):

<script>
function change(){ $("#progress").attr('aria-valuenow', '60'); 
};
change();
</script>

I also tried this (didn't work):

<script>
function change(){ $("#progress").attr('aria-valuenow', '60'); }; change();
</script>

The website is definitely reading properly from the file, and it is probably just the way that I am inserting the code that doesn't make the change.

Help please.

PS I am re-reading the file that inputs the HTML with the following AJAX call. Basically it just re-reads the file every second and appends html to a div:

<script>
$(document).ready(function() {
    var filename = "path/to/file/" + fileName;
    console.log(filename);
    setTimeout(functionToLoadFile, 10);
    function functionToLoadFile(){
            $.ajax({
                url: filename,
                cache: false,
                success: function(data) {
                    $('#content').html(data);
                    setTimeout(functionToLoadFile, 1000);
                },
            });
    }
});
</script>

Thanks to everyone who responds <3

Answer 1

Try this jsfiddle

Basically:

$("#progress").progressbar("option", "value", 60);