title: replace image src onclick jQuery
body: <p>I'm trying to create simple product page<br></p>
  
  <h3>HTML:</h3>
  
  <pre><code>&lt;div class="product-image"&gt;
      &lt;div class="product-large-image"&gt;
          &lt;img src="http://demo4coder.com/gosmart/pub/media/catalog/product/cache/image/600x600/e9c3970ab036de70892d86c6d221abfe/v/e/venus100_shoes3.jpg" alt="Product Title" id="large-image"&gt;&lt;/div&gt;
      &lt;div class="product-small-image"&gt;
          &lt;img src="https://cf2.s3.souqcdn.com/item/2015/10/13/92/68/92/8/item_XL_9268928_10008769.jpg" alt="Product Title" id="small-image"&gt;&lt;/div&gt;
      &lt;div class="product-small-image"&gt;
          &lt;img src="https://cf2.s3.souqcdn.com/item/2015/10/13/92/68/92/8/item_XL_9268928_10008754.jpg" alt="Product Title" id="small-image"&gt;&lt;/div&gt;
      &lt;div class="product-small-image"&gt;
          &lt;img src="https://cf2.s3.souqcdn.com/item/2015/10/13/92/68/92/8/item_XL_9268928_10008769.jpg" alt="Product Title" id="small-image"&gt;&lt;/div&gt;
      &lt;div class="product-small-image"&gt;
          &lt;img src="https://cf2.s3.souqcdn.com/item/2015/10/13/92/68/92/8/item_XL_9268928_10008754.jpg" alt="Product Title" id="small-image"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h3>CSS:</h3>
  
  <pre><code>.product-large-image {
      width: 100%;
      border: 2px solid #ffac00;
      text-align: center;
      display: inline-block;
      margin-bottom: 5px;
  }
  .product-large-image img {
      width: 90%;
  }
  .product-small-image {
      width: 19.38%;
      border: 2px solid #ffac00;
      margin-bottom: 5px;
      display: inline-block;
      text-align: center;
      cursor: pointer;
  }
  .product-small-image img{
      width: 90%;
  }
  </code></pre>
  
  <p>I need to replace the <em>src</em> attribute of the large image with the <em>src</em> attribute of the clicked image.</p>
  
  <h3>JS (jquery):</h3>
  
  <pre><code>$('#small-image').click(function(){
      var imgsrc=$(this).attr('src');
      $('#large-image').attr('src',imgsrc);
  });
  </code></pre>
  
  <p>It's working well only on first image<br>
  I need it to work when any of the small images is clicked, not just the first.</p>
  
  <p>This is live example of my code:<br>
  <a href="https://jsfiddle.net/MohamedMehanny/dsahrLvn/2/" rel="nofollow noreferrer">https://jsfiddle.net/MohamedMehanny/dsahrLvn/2/</a></p>