Почему обновляется картинка товара на тильде только после нажатия на сторонний элемент(если на иконку нажимаешь не отображается, после нажатия норм)?

<style>
/*Стиль для иконки*/
   .hovercolor{
   transition: .3s linear;    
   } 
   .activecolor{
    box-shadow: 0px 0px 0px 5px #ffffff !important;
}
   .hovercolor:hover{
    box-shadow: 0px 0px 2px 4px #d1cbc1;   
   }
</style>
 
<script>
$( document ).ready(function() {
//Примваиваем классы нашим элементам  
$('[href = "#coloricon"]').addClass('hovercolor');
$('.hovercolor:eq(0)').addClass('activecolor');
$('[href = "#colortext"]').addClass('colortext');
$('[href = "#prodimg"]').addClass('prodimg');
$('[href = "#oqclassicbutton"]').addClass('classicbutton');
//Задаём нужную ссылку
$('.classicbutton').attr('href' , '#order:5-in-1 Amber Balm  (White) = 45 :::image=https:static.tildacdn.com/tild3730-3835-4138-b336-393561626239/noroot.png');
$('.prodimg').not('.prodimg:first').hide();
//Функция скрытия изображения и деактивации иконок 
function activecolor(){ 
    $('.hovercolor').removeClass('activecolor');
    $('.prodimg').fadeOut();
};
 
var number = 0;
//При клике на цвет
$( ".hovercolor" ).click(function() {
   //Вычисляем номер нашего цвета        
   number = $(".hovercolor").index(this);
   activecolor();   $(this).addClass('activecolor');
   $('.prodimg:eq('+number+')').fadeIn();
   if (number==0){
   $('.colortext').text('White').css('color' , '#222222');
   $('.classicbutton').attr('href' , '#order:5-in-1 Amber Balm  (White) = 45 :::image=https://static.tildacdn.com/tild3730-3835-4138-b336-393561626239/noroot.png');
};
   if (number==1){
   $('.colortext').text('Sand').css('color' , '#222222');
   $('.classicbutton').attr('href' , '#order:5-in-1 Amber Balm  (Sand) = 45 :::image=https://static.tildacdn.com/tild3966-3265-4131-b635-666530346162/noroot.png');
};

   if (number==2){
$('.colortext').text('Green').css('color' , '#222222');
   $('.classicbutton').attr('href' , '#order:5-in-1 Amber Balm  (Green) = 45 :::image=https://static.tildacdn.com/tild6135-6166-4762-a666-653537336233/noroot.png');
};

   if (number==3){
   $('.colortext').text('Black').css('color' , '#222222');
   $('.classicbutton').attr('href' , '#order:5-in-1 Amber Balm  (Black) = 45 :::image=https://static.tildacdn.com/tild6431-3961-4438-b731-323366336161/noroot.png');
};
return false;});
 
});    
</script>