jQuery UI draggable goes behind other elements

Question

I'm trying to make draggable options which can be dragged in 3 different boxes and then also moved between boxes. When I drag the first option and drop it in the box it works fine. However when I try to move the dropped item to another box for some reason it goes behind other elements on the page except the one where it was dropped. I would want for it to work the same way as it's working before it's dropped.
Can anyone help me? jsfiddle example: https://jsfiddle.net/cz6kL69c/2/
my html code:

<div id="questionContainer">
  <div id="optionContainer">
    <div class="option">
      <label>Option 1</label>
    </div>
    <div class="option" >
      <label>Option 2</label>
    </div>
    <div class="option ">
      <label >Option 3</label>
    </div>
  </div>
  <div id="BoxContainer" style="column-count: 3;">
    <div class="box"><b>Box 1</b></div>
    <div class="box"><b>Box 2</b></div>
    <div class="box"><b>Box 3</b></div>
  </div>
  <div id="answerContainer" style="column-count: 3;">
    <div class="answerBox"></div>
    <div class="answerBox"></div>
    <div class="answerBox"></div>
  </div>
</div>

CSS:

#answerContainer { margin-top:5px;}
#optionContainer { margin:20px 0;}
.dragOver { background-color: lightgreen;}

.box { 
cursor:default; 
margin: 0px 2px 2px 0px; 
text-align:center; 
background-color:green; 
font-size:1em; 
padding:15px 10px; 
}

.answerBox { 
min-height:200px; 
border: solid 1px black; 
margin: 0px 2px 2px 0px;  
padding:5px 5px; 
}

.option { 
width:245px; 
margin: 0px 2px 2px 0px; 
background-color:lightblue; 
font-size:1em;  
padding:10px 10px; 
}

JS

$(document).ready( function() 
{
    $(".option").draggable({
        revert: "invalid"
    }); 
    $(".answerBox").droppable({
        hoverClass: "dragOver",
        drop: function(event, ui) {
            $(ui.draggable).css({'left':'0', 'top':'0'});
            var item = $(ui.draggable);
            if (!item.hasClass('copy'))
            {
                item = item.clone().addClass('copy');
                item.draggable({
                    revert: "invalid"
                }); 
            }
            $(this).append(item);
        }
    });
});

Answer 1

$(document).ready( function() 
{
  $(".option").draggable({
    revert: "invalid"
  });   
  $(".answerBox").droppable({
      hoverClass: "dragOver",
      drop: function(event, ui) {
        $(ui.draggable).css({'left':'0', 'top':'0'});
        var item = $(ui.draggable);
        if (!item.hasClass('copy'))
        {
          item = item.clone().addClass('copy');
          item.draggable({
            revert: "invalid",
            start: function(event, ui) { 
              item.hide();
            },
            stop: function(event, ui) {
              item.show();
            },
            helper: "clone"
        }); 
        }
        $(this).append(item);
      }
    });
});

Fixed