JSFiddle - React, Tailwind, and code Playground

HTML

<button id="magician">Сим-салабим-ахалай-махалай</button>
<span id="open_startComment" data-chld="<div class='first'>"></span>
<p>Test</p>
<span id="open_endComment" data-chld="</div>"></span>

CSS

#open_startComment, #open_endComment {
  display: none;
}
#first p {
  background: #ff00ff;
  font-size: 150%;
}

JavaScript

var $button = $('#magician');
$open1 = $("#open_startComment");
$open2 = $("#open_endComment");

$button.on('click', function () {

		$startDiv = $open1.attr("data-child");
    $startDiv.insertAfter($open1);
    
		$endDiv = $open2.attr("data-child");
    $endDiv.insertBefore($open2);
        
    
    /*for (i = 0; i < $nodes_total; ++i) {        
        if (nodes[i].nodeType === 8) {                  
            var $mark2 = nodes[i].nodeValue.trim().substr(0, 17),
                $text2 = nodes[i].nodeValue.trim().substr(17);            
          	if ($mark2 === 'open_endComment: ') { 
            		nodes[i].insertBefore($text2);
                alert(nodes[i].nodeValue);
          	}        
        }
    }*/
});