javascript: change attributes of multiple div's inside other div
<p>I have table:</p>

<pre><code>&lt;table class="table table-condensed" id="mbusTable"&gt;
    &lt;label&gt;&lt;h5&gt;rtu&lt;/h5&gt;&lt;/label&gt;
    &lt;tbody&gt;
        &lt;td&gt;&lt;input type="text" id="mid" class="span1" placeholder="mid"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type="text" id="type" class="span1" placeholder="typem"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type="text" id="inverce" class="span1" placeholder="inverce"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type="text" id="mbaddr" class="span1" placeholder="mbaddr"&gt;&lt;/td&gt;
    &lt;/tbody&gt; 
&lt;/table&gt;
</code></pre>

<p>All I want is to add <code>_mbusTable</code> to all inputs inside it. Here's what I have now:</p>

<pre><code>        function correctIDs(tableID)
            var table = document.getElementById(tableID);
            var colCount = table.rows[0].cells.length;
            var prefix = tableID;
            for(var i=0; i&lt;colCount; i++) {
                prefix += "_" + table.childNodes[1].getAttribute('id');
                table.childNodes[1].setAttribute('id',prefix);
                prefix = tableID;
            }
        };
</code></pre>

<p>But I guess it changes only first <code>&lt;input&gt;</code>. How can I jump to the next?
Sorry if it's something obvious. Thanks</p>
