title: change product image when select color option
body: <p><a href="https://i.stack.imgur.com/jWAG9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jWAG9.png" alt="enter image description here"></a></p>
  
  <p>Have two product image, one on the left side and one is on the right side.
  When color is choosed, 'tick' icon will appear on top of the selection.
  The issue is, 'tick' icon won't stick to active checkbox when it's been selected.
  The 'tick' icon will somehow just can stick into one selector only.
  The intention is to have 'tick' icon into active selection.
  Please advise on this matter.</p>
  
  <pre><code>    &lt;style&gt;
          .product-img {
          width: 50%;
          display: block;
          position: relative;
          height:250px;
          }
          .product-img img {
          width: auto;
          height: 100%;
          position: absolute;
          opacity: 0;
          transition: all 0.3s ease;
          }
          .product-img img.active {
          opacity: 1;
          }
          /* Product Configuration */
          .product-color span {
          font-size: 14px;
          font-weight: 400;
          color: #86939E;
          }
          /* Product Color */
          .color-choose div {
          display: inline-block;
          }
          .color-choose input[type="radio"] {
          display: none;
          }
          .color-choose input[type="radio"] + label span {
          display: inline-block;
          width: 25px;
          height: 25px;
          margin: -1px 2px 0 0;
          vertical-align: middle;
          cursor: pointer;
          /* border-radius: 50%; */
          border: 2px solid #FFFFFF;
          box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
          }
          .color-choose input[type="radio"]#red + label span {
          background-color: #C91524;
          }
          .color-choose input[type="radio"]#blue + label span {
          background-color: #314780;
          z-index: 10;
          }
          .color-choose input[type="radio"]#black + label span {
          background-color: #323232;
          }
          .color-choose input[type="radio"]:checked + label span {
          background-image: url(http://lisenme.com/demo/color_change/images/check-icn.svg);
          background-repeat: no-repeat;
          background-position: center;
          }
      &lt;/style&gt;
      &lt;style&gt;
          .product-img-a {
          width: 50%;
          display: block;
          position: relative;
          height:250px;
          }
          .product-img-a img {
          width: auto;
          height: 100%;
          position: absolute;
          opacity: 0;
          transition: all 0.3s ease;
          }
          .product-img-a img.active-a {
          opacity: 1;
          }
          /* Product Configuration */
          .product-color-a span {
          font-size: 14px;
          font-weight: 400;
          color: #86939E;
          }
          /* Product Color */
          .color-choose-a div {
          display: inline-block;
          }
          .color-choose-a input[type="radio"] {
          display: none;
          }
          .color-choose-a input[type="radio"] + label span {
          display: inline-block;
          width: 25px;
          height: 25px;
          margin: -1px 2px 0 0;
          vertical-align: middle;
          cursor: pointer;
          /* border-radius: 50%; */
          border: 2px solid #FFFFFF;
          box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
          }
          .color-choose-a input[type="radio"]#reda + label span {
          background-color: #C91524;
          }
          .color-choose-a input[type="radio"]#bluea + label span {
          background-color: #314780;
          z-index: 10;
          }
          .color-choose-a input[type="radio"]#blacka + label span {
          background-color: #323232;
          }
          .color-choose-a input[type="radio"]:checked + label span {
          background-image: url(check-icn-a.svg);
          background-repeat: no-repeat;
          background-position: center;
          }
      &lt;/style&gt;
  
  
  &lt;div style="display: inline-block"&gt;
      &lt;div class="product-img"&gt;
          &lt;img data-image="black" src="http://lisenme.com/demo/color_change/images/black.png" alt=""&gt;
          &lt;img data-image="blue" src="http://lisenme.com/demo/color_change/images/blue.png" alt=""&gt;
          &lt;img data-image="red" class="active" src="http://lisenme.com/demo/color_change/images/red.png" alt=""&gt;
      &lt;/div&gt;
      &lt;!-- Product Color --&gt;
      &lt;div class="product-color"&gt;
          &lt;span&gt;Select Color&lt;/span&gt;
          &lt;div class="color-choose"&gt;
              &lt;div&gt;
                  &lt;input data-image="red" type="radio" id="red" name="color" value="red" checked&gt;
                  &lt;label for="red"&gt;&lt;span&gt;&lt;/span&gt;&lt;/label&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;input data-image="blue" type="radio" id="blue" name="color" value="blue"&gt;
                  &lt;label for="blue"&gt;&lt;span&gt;&lt;/span&gt;&lt;/label&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;input data-image="black" type="radio" id="black" name="color" value="black"&gt;
                  &lt;label for="black"&gt;&lt;span&gt;&lt;/span&gt;&lt;/label&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  
  &lt;div style="display: inline-block; margin-left: 200px;"&gt;
      &lt;div class="product-img-a"&gt;
          &lt;img data-image="blacka" src="http://lisenme.com/demo/color_change/images/black.png" alt=""&gt;
          &lt;img data-image="bluea" src="http://lisenme.com/demo/color_change/images/blue.png" alt=""&gt;
          &lt;img data-image="reda" class="active-a" src="http://lisenme.com/demo/color_change/images/red.png" alt=""&gt;
      &lt;/div&gt;
      &lt;!-- Product Color --&gt;
      &lt;div class="product-color-a"&gt;
          &lt;span&gt;Select Color&lt;/span&gt;
          &lt;div class="color-choose-a"&gt;
              &lt;div&gt;
                  &lt;input data-image="reda" type="radio" id="reda" name="color" value="reda" checked&gt;
                  &lt;label for="reda"&gt;&lt;span&gt;&lt;/span&gt;&lt;/label&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;input data-image="bluea" type="radio" id="bluea" name="color" value="bluea"&gt;
                  &lt;label for="bluea"&gt;&lt;span&gt;&lt;/span&gt;&lt;/label&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;input data-image="blacka" type="radio" id="blacka" name="color" value="blacka"&gt;
                  &lt;label for="blacka"&gt;&lt;span&gt;&lt;/span&gt;&lt;/label&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script&gt;
          $(document).ready(function() {
          $('.color-choose input').on('click', function() {
  
            var fridge = $(this).attr('data-image');
  
            $('.active').removeClass('active');
            $('.product-img img[data-image = ' + fridge + ']').addClass('active');
            $(this).addClass('active');
  
            $checkbox.prop('checked', true);
  
          });
  
          });
  
      &lt;/script&gt;
      &lt;script&gt;
          $(document).ready(function() {
          $('.color-choose-a input').on('click', function() {
  
            var fridgeA = $(this).attr('data-image');
  
            $('.active-a').removeClass('active-a');
            $('.product-img-a img[data-image = ' + fridgeA + ']').addClass('active-a');
            $(this).addClass('active-a');
  
            $checkbox.prop('checked', true);
  
          });
  
          });
  
      &lt;/script&gt;
  </code></pre>
  
  <p><a href="https://codepen.io/anon/pen/xXKMKa" rel="nofollow noreferrer">codepen</a></p>