JSFiddle - React, Tailwind, and code Playground

HTML

<div class="source" id="foo">
    <ul>
      <li>test</li>
      <li>test</li>
    </ul>
</div>
<div id="target">
    <p class="dummy">
        Target
    </p>
</div>
<button id="transfer-button">Transfer</button>
<span id="press-counter"></span>

CSS

body {
    color: #555;
    font-family: sans-serif;
}

button,
div,
p {
    margin: 1em;
}

.source {
    color: #900;
}

.dummy {
    color: #999;
    font-style: italic;
}

button {
    cursor: pointer;
    font-size: 1em;
}

#target {
    border: 1px dashed blue;
}

#press-counter {
    font-size: .75em;
}

JavaScript

var buttonPressCounter = 0;
var sourceEl = $('.source');
var targetEl = $('#target');

$('#transfer-button').click(function() {
    buttonPressCounter++;

    sourceEl.detach(); //<--
    targetEl.html('<p class="dummy">Transferring...</p>');
    setTimeout(function() {
        targetEl.html('').append(sourceEl);
    }, 750);

    $('#press-counter').text('button pressed ' + buttonPressCounter + ' time(s)');
    return false;
});