title: Multiple html data-* attributes and js function not working
body: <p>The function is working good when I have only one <code>data-*</code> attribute declared, but if I have multiple <code>data-*</code> attributes for my product(product-image) the function is not working, in other words the product image is not showing up, it generates wrong <code>.src</code>.</p>
  
  <p>In total I have 10 combinations of images (2 colors, each one with 5 different shapes).</p>
  
  <p>I'm new to javascript/jquery. So will be very grateful for some help.</p>
  
  <pre><code>&lt;div class="container"&gt;
  
      &lt;h2&gt;Product Page&lt;/h2&gt;
  
      &lt;div class="product-view"&gt;
          &lt;img id="myimg" src="img/square_orange_img.jpg" width="372" height="511"&gt;
      &lt;/div&gt;
  
      &lt;div class="options"&gt;
          &lt;p&gt;Choose a Color:&lt;/p&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;img class="colorbox" data-color="orange" style="background-color:orange;" onclick="changecolor(this)" alt=""&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img class="colorbox" data-color="purple" style="background-color:purple;" onclick="changecolor(this)" alt=""&gt;&lt;/li&gt;
          &lt;/ul&gt;
  
          &lt;p&gt;Select Shape:&lt;/p&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;img class="shapes" data-shape="square" src="img/square-vertical.png" width="50" height="69" onclick="changeshape(this)" alt=""&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img class="shapes" data-shape="round" src="img/round-vertical.png" width="50" height="69" onclick="changeshape(this)" alt=""&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img class="shapes" data-shape="classic" src="img/classic-vertical.png" width="50" height="69" onclick="changeshape(this)" alt=""&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img class="shapes" data-shape="curved" src="img/curved-vertical.png" width="50" height="69" onclick="changeshape(this)" alt=""&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img class="shapes" data-shape="scallop" src="img/scallop-vertical.png" width="50" height="69" onclick="changeshape(this)" alt=""&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;script&gt;
  function changecolor(elem) {
      var color = elem.getAttribute("data-color");
      var shape = elem.getAttribute("data-shape");
      var newImageSrc = "img/" + shape + "_" + color + "_" + "img.jpg";
      document.getElementById("myimg").src = newImageSrc;
  }
  function changeshape(elem){
      var color = elem.getAttribute("data-color");
      var shape = elem.getAttribute("data-shape");
      var newImageSrc = "img/" + shape + "_" + color + "_" + "img.jpg";
      document.getElementById("myimg").src = newImageSrc;
  }
  &lt;/script&gt;
  </code></pre>