Clone draggable and make the cloned element draggable as well

I want to be able to clone the main draggable elements and be able to drag the cloned element as well.

You can run the code here: https://jsfiddle.net/2qatpe47/

CSS:

.header{
  padding: 20px;
  background: #000;
  color: #fff;
  text-align: center;
}

.drag{
  background: red;
  padding: 10px;
  margin-right: 20px;
}

.zone{
  width: 80%;
  margin: 40px auto;
}

.drop{
  display: inline-block;
  width: 27%;
  border: 1px solid #000;
  height: 70px;
  padding: 10px;
  vertical-align: middle;
  text-align: center;
}

.ui-droppable-disabled {
    background: #494f54;
}

HTML:

<div class="header">
  <span class="drag main">X</span>
  <span class="drag main">O</span>
</div>
<div class="zone">
  <div class="drop"></div>
  <div class="drop"></div>
  <div class="drop"></div>
  <div class="drop disabled"></div> <!-- Droppable Disabled -->
  <div class="drop"></div>
  <div class="drop"></div>
  <div class="drop"></div>
  <div class="drop"></div>
  <div class="drop"></div>
</div>

jQuery:

$(".drag").draggable({
    helper: "clone"
});


$(".drop").droppable({
    accept: ".drag",
    drop: function(event, ui) {
        //If the dragged element is `X` or `O` on the top
        if($(ui.draggable).hasClass('main')){
            var cloned = $(ui.draggable).clone();
          
            cloned.removeClass('main');

            $(this).append(cloned);

            //cloned.draggable();
        }
        
        $(this).droppable('disable');
    },
    out: function(event, ui) {
        $(this).droppable('enable');
    }
});

//Disable Droppable for elements with .disabled
$('.disabled').droppable('disable');

The issue is that I can't drag the cloned element after dropping it. I tried to add this cloned.draggable(); it's commented out to make that cloned element draggable but the issue is that I can drag it to disabled and to other cells which already contain cloned elements and the cell that element dragged out is disabled.

I want each cell to contain only one dragged element and if I move the element to another cell it shouldn't be disabled.

Run the linked JSFiddle and begin with the draggable and droppable setup shown in the issue. Trace the clone created in the drop callback and the disabled-cell behavior; done means cloned elements remain draggable, occupied or disabled cells reject them, and moving an element re-enables its former cell.