Elementor repeater with unique elements

Question

I need to change the position, color, background-image of elements inside each repeater separately.

My widget code is here:

$repeater->add_control(
  'clock_gy_minute_hand_position', array(
     'label' => __('Minute Hand Position', 'origami-clock'),
     'type' => Controls_Manager::DIMENSIONS,
     'default' => array('isLinked' => false),
     'size_units' => ['px'],
     'allowed_dimensions' => ['top', 'left'],
     'selectors' => [
        '{{WRAPPER}} .clock' => 'top:{{TOP}}%;right:{{RIGHT}}%;bottom:{{BOTTOM}}%;left: 
         {{LEFT}}%;',
     ],
  )
  )
 );

when got the data of each repeater by looping, It's applied the CSS position of each clock hand to the same position. It applies the last repeater item's position to all the elements. I need to identify each repeater element uniquely.

I see some article says like this

'{{WRAPPER}} .clock'.$item['_id'] => 'top:{{TOP}}%;right:{{RIGHT}}%;bottom:{{BOTTOM}}%;left:{{LEFT}}%;',

Unfortunately, this also not working for me.

Answer 1

selector should be

'selectors' => [
'{{WRAPPER}} {{CURRENT_ITEM}} .clock' => 'background-color: {{VALUE}};',

]

add this class to your repeated item

elementor-repeater-item-' . $item['_id']

Hope this will work for you