JS function not changing innerhtml

Question

I call this javascript function (with one line of jquery) when the submit button in my form is clicked. Checking the dev console in Firefox, I can see that it loops through the IDs and prints their names to the console. For each id, I want to change the inner html.

The purpose of this is to change the text of each of the following divs:

<div class="upload_text" style="margin-left: 13%;">
  <div id="td1" class="text_display">*&nbsp;&nbsp;In process A1 . . . </div>
  <div id="td2" class="text_display">*&nbsp;&nbsp;Completed . . . </div>
  <div id="td3" class="text_display">*&nbsp;&nbsp;In process A2 . . . </div>
  <div id="td4" class="text_display">*&nbsp;&nbsp;Completed . . . </div>
  <div id="td5" class="text_display">*&nbsp;&nbsp;In process A3 . . . </div>
  <div id="td6" class="text_display">*&nbsp;&nbsp;Completed . . . </div>
  <br>
</div>

Here's the script:

<script>

function Progress()
{
    for (i = 1; i < 7; i++)
    {
        id = "td" + i.toString();
        console.log(id);
        var newcontent = "To replace";
        $('#id').empty().append(newcontent);
    }
}

</script>

I also tried this, but it did not change the html:

$("id").html("Hello World");

Using pure javascript, I also tried this:

document.getElementById(id).innerHTML = "new content";

Now the dev console correctly shows each id name in sequence, but the html doesn't change. Thanks very much for any ideas.

This should be enough code to reproduce the problem, but if I haven't posted enough code, please just ask and I'll post it all.