JSFiddle - React, Tailwind, and code Playground

by Valder Black

HTML

<button id="addbtn">Add Spopiler</button><br><br>
<div id="content" contenteditable="true"></div>
<br>
<button id="btn">Спойлер</button>
<div id="spoiler">
Самый обычный спойлер <br>
Самый обычный спойлер <br>
Самый обычный спойлер <br>
Самый обычный спойлер <br>
Самый обычный спойлер <br>
</div>

CSS

#content{
    height: 100px;
    border: 1px dashed #3d3d3d;
}

#spoiler
{
    background: rgba(0,0,0,.1);
}

JavaScript

var spoiler1 = 0;
$("#addbtn").on('click', function() {
    spoiler = spoiler+1;
    var temp = "<button id='btn'>Спойлер</button>";
    document.execCommand("insertHTML", false, temp);
});



$('#spoiler').hide();
$('#btn').on('click', function() {
$('#spoiler').slideToggle(300);
});

$('#content button').on('click', function() {
alert(this.id);
});