JQuery UI , draggable card not working after drop

Question

I have a problem when I dragged a card in card lists, the card I dragged and dropped in the new card list is not available to drag again.

My JQuery code is

$("#card-list").droppable({
    accept: ".card",
    drop: function( event, ui ){          
        var dropped = ui.draggable;
        $(this).append(dropped.clone().removeAttr('style'));
        dropped.remove();
        }
    });

   $(".card").draggable({
      revert: true,
      opacity: .5
    }),

and my HTML is

<div class="row">
  <div class="col-6">
    <div class="card">
      Some text
    </div>
    <div class="card">
      Some text
    </div>
    <div class="card">
      Some text
    </div>
  </div>
  <div class="col-6" id="card-list">
    <div class="card">
      Some text
    </div>
    <div class="card">
      Some text
    </div>
    <div class="card">
      Some text
    </div>
  </div>
</div

see live example

---

another problem I want to make the draggable card at the top of the new list, not at the bottom
or
when added at the bottom body scroll down to the added card.