JSFiddle - React, Tailwind, and code Playground

HTML

<section class="container">
  <div class="spoiler-box" id="spoiler-box">
    <div class="spoiler">
      <div class="heading">Title 1</div>
      <div class="content">Content 1</div>
    </div>
    <div class="spoiler">
      <div class="heading">Title 2</div>
      <div class="content">Content 2</div>
    </div>
  </div>
</section>

CSS

.container{
  width: 100%;
}
.spoiler-box{
  width: 60%;
  margin: auto;
}
.spoiler{
  border: 1px solid #ccc;
  margin-bottom: 0.5em;
}
.heading{
  background-color: #ccc;
}
.heading, .content{
  padding: 0.5em;
}
.heading span{
  float: right;
}

JavaScript

var elem = document.getElementsByClassName('heading');

var newSpan = document.createElement('span');
newSpan.innerHTML = '[ открыть ]';

for(var i = 0; i < elem.length; i++){
	elem[i].appendChild(newSpan);
  console.log(elem[i].textContent);
}