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>
<br /><span class="del">Очистить</span><br />

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').one('click',function() {
  var v = $('.show-kod .v')[0].outerHTML.replace(/</g, '<').replace(/>/g, '>');
	$('.show-kod .v').text(v);
});

$('.del').click(function() {
$('.show-kod .v').empty();
});