How can I change featured image when I click on swatches??

[Carlvic22]

Hello,

Anyone can help me why my featured photo wont change when I select variant on collection page??

https://strokes-test.myshopify.com/collections/frontpage


JS.

initColorSwatchGrid: function() { 
jQuery('.item-swatch li label').click(function(){ 
var newImage = jQuery(this).parent().find('.hidden img').attr('src');
jQuery(this).parents('.item-row').find('.featured-image').attr({ src: newImage }); 
return false;
});
}

html

<ul class="item-swatch color_swatch_Value">  
{% for option in product.options %}
  {% if option == 'Shades' %}
    {% assign index = forloop.index0 %}
    {% assign colorlist = '' %}
    {% assign color = '' %}
    {% for variant in product.variants %}
      {% capture color %}
        {{ variant.options[index] }}
      {% endcapture %}
      {% unless colorlist contains color %}  
      {% assign text = color | handleize %}
      <li>
       <label style="{% if text == 'white' %}border: 1px solid #cbcbcb; {% endif %}background-color: {{ color | split: ' ' | last | handle }}; background-image: url({{ text | append: '.png' | file_url }});"></label>
        {% if variant.image != null %}
        <div class="hidden">
          <img src="{{ variant.image.src | product_img_url: 'grande' }}" alt="{{ text }}"/>
        </div>
        {% endif %}
      </li>
        {% capture tempList %}
          {{ colorlist | append: color | append: ' ' }}
        {% endcapture %}
        {% assign colorlist = tempList %}
      {% endunless %}
    {% endfor %}
  {% endif %}
{% endfor %}
</ul>