JSFiddle - React, Tailwind, and code Playground

HTML

<p class="source">
    Source
</p>
<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() {
    if (buttonPressCounter > 0) sourceEl = sourceEl.clone();
    
    buttonPressCounter++;
    
    targetEl.html('<p class="dummy">Transferring...</p>');
    setTimeout(function() {
        $('.source').remove();
        targetEl.html('').append(sourceEl);
    }, 750);

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