При клике переместить блок из одного родителя в другой и обратно?

есть такая структура

<div class="published">
	<div class="card">
              .....
            <div class="transfer"></div>
        </div>
	<div class="card">
              .....
            <div class="transfer"></div>
        </div>
</div>
<div class="stock">
	<div class="card">
              .....
            <div class="transfer"></div>
        </div>
	<div class="card">
              .....
            <div class="transfer"></div>
        </div>
</div>

Нужно по клику на блок transfer переместить (вырезать ) блок .card и вставить в блок stock . По повторном клике, вернуть этот элемент опять к родителю published. И так же из блока stock в блок published.
Вот код с который я написал

$(document).ready(function(){

    $(".published transfer").click(function(){
    var elem = $(this).closest('.card');
    $('.stock').append(elem);
    });
    $(".stock transfer").click(function(){
    var elem = $(this).closest('.card');
    $('.published').append(elem);
    });
   });

Написал такой код , определяет кнопку по её родителю и переносит блок к другому родителю.
Блоки card перемещаются из одного к другому родителю , НО ПО ПОВТОРНОМ КЛИКЕ назад не возвращаются!