title: javascript onchange event only works one time on same page
body: <p>I have a form with where users are able to customize tags they buy from our website.  The objective of the javascript is to change the picture to the picture in our database of the original tag when the user selects that tag from a drop down list.</p>
  
  <p>I reproduce the code 10 times when the page loads as the user gets to purchase 10 tags.  The problem is the only one that works is the first one.  and it works great!  The second one (though copied and pasted code) fails to work correctly at all.  If I rename the getElementById to tag 1.  The second box works great for the first box.  But not correctly.</p>
  
  <p>Here is some code.</p>
  
  <p>The php function that generates the select options.</p>
  
  <pre><code>function createSelectDT(){
  
  
          $qry = "SELECT `products_model`, `products_image` FROM `zen_products` WHERE `products_id` &gt; '0'";
          $result = mysql_query($qry)or die(mysql_error());
  
          //we actually need the last two digits to find what department its in.
  
          while ($row = mysql_fetch_assoc($result)){
              $model = $row['products_model'];
              $image = $row['products_image'];
  
              //how many characters does the string have?
              $length = strlen($model);
  
              //subtract two so we can start there
              $length = $length - 2 ;
  
              //get the last to digits!
  
              $last2 = substr($model, $length, 2);
  
              //we have the last two lets make sure that they equal dog tags and echo it as a select option
  
              if ($last2 == "01"){
                  echo "&lt;option value=\"images/" . $image . "\"&gt;" . $model . "&lt;/option&gt;";
              }
          }
  
      }
  </code></pre>
  
  <p>the html and javascript</p>
  
  <pre><code>&lt;td&gt;&lt;img id="tag1" src="images/1.png" /&gt;&lt;/td&gt;&lt;td&gt;&lt;select onchange="document.getElementById('tag1').src = this.options[this.selectedIndex].value;" name="tag1"&gt;&lt;?php createSelectDT(); ?&gt;&lt;/select&gt;&lt;br /&gt;New Header:&lt;input type="text" name="tag1head" /&gt;&lt;br /&gt;New background:&lt;input type="text" name="tag1bg" /&gt;&lt;br /&gt;New Footer:&lt;input type="text" name="tag1foot" /&gt;&lt;br /&gt;Upload image:&lt;/td&gt;
  
  &lt;td&gt;&lt;img id "tagtwo" src="images/1.png" /&gt;&lt;/td&gt;     &lt;td&gt;&lt;select onchange="document.getElementById('tagtwo').src = this.options[this.selectedIndex].value;" name="tag2"&gt;&lt;?php createSelectDT(); ?&gt;&lt;/select&gt;&lt;br /&gt;New Header:&lt;input type="text" name="tag1head" /&gt;&lt;br /&gt;New background:&lt;input type="text" name="tag1bg" /&gt;&lt;br /&gt;New Footer:&lt;input type="text" name="tag1foot" /&gt;&lt;br /&gt;Upload image:&lt;/td&gt;
  </code></pre>
  
  <p>its interesting that tag2 will work if I set the javscript getElementById to tag1. but not for tag2.  whatsup?              </p>