[sergiocharm]

1. Есть список заголовков.
2. Его нужно вставить в поле "Вставьте список заголовков" и загрузить их на страницу (вывести).
3. Далее на странице выбирая из списка заголовки (кликать по нему) и он добавляется в поле "Структура идеальной статьи".
4. После сбора структуры, должна быть возможность ее скопировать.


Сделал такую штуку
https://codepen.io/sergiocharm/pen/MWPWMLO

<div class="content">
<style>
.content1{width:48%;margin:10px;float:left}
.content1 textarea{background:#fff}
.offer{padding:3px 10px;cursor:pointer}
.offer:hover{background:#ddd;}
</style>
  <div class="">
    <h3>Вставьте список заголовков (каждый заголовок с новой строки):</h3> 
  </div>
       <textarea id="id_textarea" rows="5" cols="85"></textarea> <br />
  <button>Добавить весь список во "Все заголовки"</button>
</div>
    <div class="content1">
    <h3>Все заголовки (кликни по заголовку, он добавится в поле справа) </h3>
    <div class="offer">Привет мир</div>
    <div class="offer">Проверка связи</div>
    <div class="offer">Чистка свитера</div>
    <div class="offer">Ну что, получилось?</div>
  </div>
  <div class="content1">
     <textarea id="id_textarea" rows="5" cols="85"></textarea>  
<br />
  <button>Копировать весь список с переносами</button> 
  </div>
</div>

// Получить все элементы предложения
const offer = document.querySelectorAll('.offer');

// Получить элемент textarea
const textarea = document.querySelector('textarea');

// Добавляем прослушиватель кликов к каждому элементу предложения
offer.forEach((offer) => {
  offer.addEventListener('click', (event) => {
    // Добавляем содержимое предложения в текстовое поле
    textarea.value += event.target.textContent + '\n';
  });
});