как менять цвет конкретного блока с помощью colorpicker на js?

создаю элементы в контент блоке определяю id dragged элемента, но меняется цвет всех dragged элементов не могу определить current элемент

var counter = 1;
var cont = document.querySelector(".main-content")


$(".content-block").on('click', (function(){

  var ele = document.createElement("div");
  ele.setAttribute("id","block"+counter);
  ele.setAttribute("class","blocks");
  ele.setAttribute("ondrag", "eleDrag(this)")
  ele.style = "height: 30%;width: 30%;background: rgba(225, 225, 225, 0.8);color: black;border: 3px solid grey;position: absolute;top: 150px;left: 450px; "
  $( function() {
    $( ".blocks" ).resizable();
  } );

  $( function() {
    $( ".blocks" ).draggable();
  } );


  cont.append(ele)

  counter++;

}
));

var rgbaColor;

function eleDrag(dragElement) {



  pickr.on('change', (color, idEl) => {
    
    dragElement.selected = true
    rgbaColor = color.toRGBA().toString();  

    if(dragElement.selected === true){
    dragElement.style.background = rgbaColor  
    }
  
  })

  dragElement.selected = false

}