change label foreach element in html using javascript
<p>I am using both html and velocity and came up with this code. The names and images are stored in an array and this is the code I used to display each of the contents of this array to the page.</p>

<pre><code>#foreach($starter in $starter)
    &lt;div class="product"&gt;  
      &lt;div class="color"&gt;&lt;img src= "$starter.img" width="100" height="100"&gt;&lt;/div&gt;
      &lt;span class="product-name"&gt;$starter.name&lt;/span&gt;
      &lt;div class="compare-wrap"&gt;
        &lt;input type="checkbox" id=""&gt;
        &lt;label id="view"&gt;Compare&lt;/label&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  #end
</code></pre>

<p>I wanted the label to change from "Compare" to "View Compare" while at the same time storing its id in the array upon checking their correspondng check box. I eventually came up with this code:</p>

<pre><code>var checkedArray = [];

$(":checkbox").change(function(){
  if((this).checked){
    checkedArray.push(this.id);
    document.getElementById('view').innerHTML = "&lt;a href='/compare'&gt;View Compare&lt;/a&gt;";
  }
  else{
    checkedArray.splice(checkedArray.indexOf(this.id), 1);
    document.getElementById('view').innerHTML = 'Compare';
  }
var str = checkedArray.join(', ');
alert(str);
});
</code></pre>

<p>but it seems it is only applicable to the first content of the array. Any idea how I can use a foreach code at this point? </p>