JSFiddle - React, Tailwind, and code Playground

HTML

<span class="sp">Добавить элемент 1</span><br /><br />
<span class="sp2">Добавить элемент 2</span><br /><br />
<span class="sp3">Добавить элемент 3</span><br /><br />

<div class="v"></div>
<br /><span class="sp4">Показать код</span><br /><br />
<div class="show-kod"><div class="v"></div></div>

CSS

.show-kod {
    background-color: #e2e2e2;
    padding: 8px;
    font-size: 14px;
}

JavaScript

$('.sp').click(function() {
$('.v').append('<span class="z" style="color:red">1</span>');
});
$('.sp2').click(function() {
$('.v').append('<span class="z" style="color:blue">2</span>');
});
$('.sp3').click(function() {
$('.v').append('<span class="z">3</span>');
});


//$('.sp4').click(function() {
  var v = $('.show-kod .v')[0].outerHTML.replace(/</g, '<').replace(/>/g, '>');
	$('.show-kod .v').text(v);
//});