title: Changing image using Select option drop down, but for multiple events?
body: <p>Using JQuery to change an image on the change of a select, the code works, on one form, however if I try to apply to same thing to another form the JQuery just doesn't work. Need to implement this one a basis where I can use the same code to change individual select.</p>
  
  <p>Feel free to run the code and see what I mean, the first item works, change the select option to red, the image changes, try the same with the next one, no luck although its written in the same fashion.</p>
  
  <p>If you need anything else let me know, thanks in advance.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function(){
    $("#colour").on('change', function(){
      $("#imageToSwap").attr("src", $(this).find(":selected").attr("data-src"));
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
   &lt;ul class="shelf"&gt;
    &lt;li class="simpleCart_shelfItem"&gt;
        &lt;img id="imageToSwap" class="item_thumb" src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagBlack.png" /&gt;
        &lt;h4 class="item_name"&gt;C&amp;amp;J Wash Bag&lt;/h4&gt;
        &lt;span class="item_price"&gt;£30.00&lt;/span&gt;
      &lt;select id="colour"&gt;
      &lt;option value="Black" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagBlack.png"&gt;Black&lt;/option&gt;
      &lt;option value="Red" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagRed.png"&gt;Red&lt;/option&gt;
  &lt;/select&gt;
        &lt;select class="item_quantity"&gt;
      &lt;option value="0"&gt;0&lt;/option&gt;
      &lt;option value="1"&gt;1&lt;/option&gt;
      &lt;option value="2"&gt;2&lt;/option&gt;
      &lt;option value="3"&gt;3&lt;/option&gt;
      &lt;option value="4"&gt;4&lt;/option&gt;
      &lt;option value="5"&gt;5&lt;/option&gt; 
     &lt;/select&gt;
        &lt;input type="hidden" class="item_shipping" value="0" /&gt;
        &lt;input type="button" class="item_add" value="Add To Basket" /&gt;
    &lt;/li&gt;
  
    &lt;li class="simpleCart_shelfItem"&gt;
        &lt;img id="imageToSwap" class="item_thumb" src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBrown.png" /&gt;
        &lt;h4 class="item_name"&gt;C&amp;amp;J Wool Lined Gloves&lt;/h4&gt;
        &lt;span class="item_price"&gt;£28.00&lt;/span&gt;
         &lt;select id="colour"&gt;
      &lt;option value="Brown" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBrown.png"&gt;Brown&lt;/option&gt;
      &lt;option value="Tan" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesTan.png"&gt;Tan&lt;/option&gt;
      &lt;option value="Black" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBlack.png"&gt;Black&lt;/option&gt;
      &lt;option value="Grey" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesGrey.png"&gt;Grey&lt;/option&gt;
  &lt;/select&gt;
        &lt;select required class="item_quantity"&gt;
      &lt;option value="0"&gt;0&lt;/option&gt;
      &lt;option value="1"&gt;1&lt;/option&gt;
      &lt;option value="2"&gt;2&lt;/option&gt;
      &lt;option value="3"&gt;3&lt;/option&gt;
      &lt;option value="4"&gt;4&lt;/option&gt;
      &lt;option value="5"&gt;5&lt;/option&gt; 
     &lt;/select&gt;
        &lt;input type="hidden" class="item_shipping" value="0" /&gt;
        &lt;input type="button" class="item_add" value="Add To Basket" /&gt;
    &lt;/li&gt;&lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>