function item_color_change(id,url,k) {

  const mid = document.getElementById('item_img_'+id);

  document.getElementById('stepper_'+id).style.display = 'none';

  mid.setAttribute('src',url);

  //console.log(k)

  let dt2=get_localstorage('item_pria');

  let dt=dt2.data.byid.data[id];

  //console.log(dt)

  

  let btn_color =``;

  dt.color_img.forEach((v,i)=>{

  if(i==k) {

    btn_color +=`

  <a href="#" onclick="item_color_change(${dt.id},'${v.url[0]}',${i})" class="link ml-6 fs-sm">

    <span class="fw-800">${v.color}</span>

      <div class="ml-3" style="width:28px;height:28px;background-image: url(${v.icon_img});border-radius:14px;"><i class="hidden"></i></div>

  </a>

    `;

    } else {

    btn_color +=`

  <a href="#" onclick="item_color_change(${dt.id},'${v.url[0]}',${i})" class="link ml-6 fs-sm">

    <span class="fw-200">${v.color}</span>

      <div class="ml-3" style="width:28px;height:28px;background-image: url(${v.icon_img});border-radius:14px;"><i class="hidden"></i></div>

  </a>

    `;

    }

  });

  btn_color +=``;

  

  let size_content =``;

  dt.color_img[k].stock.forEach((v,q)=>{

    size_content +=`

    <a href="#" onclick="item_size_change(${id},'Rp.${v.rp}',${k},${q})">

    <div id="s_${v.variant_id}" class="radio-wrapper">

      <label class="pt-2" for="${v.variant_id}">${v.size}, ${v.stock} pcs, ${v.weight}gr</label>

    </div></a>

   `;

  });

  size_content +=``;

  $$("#item_m_col_"+id).html(btn_color );  

  $$("#item_size_"+id).html(size_content);  

}