Javascript-форум - Как загружать в html строки с последующей работой?

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Как загружать в html строки с последующей работой? (https://javascript.ru/forum/misc/85155-kak-zagruzhat-v-html-stroki-s-posleduyushhejj-rabotojj.html)

Как загружать в html строки с последующей работой?

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';
  });
});

вставка и копирование текста

sergiocharm,

<!DOCTYPE HTML>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        #id_textarea {
            background-color: #fff
        }
        .offer {
            padding: 3px 10px;
            cursor: pointer
        }
        .offer:hover {
            background-color: #ddd;
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const headlines = ["Добавить весь список", "Привет мир", "Проверка связи", "Чистка свитера", "Ну что, получилось?"];
            const textarea = document.querySelector("#id_textarea");
            const control = document.querySelector(".content");
            const button = document.createElement("div");
            button.className = "offer";
            const buttons = headlines.map((txt, i) => {
                let clone = button.cloneNode(true);
                let up = i ? txt : headlines.slice(1).join("\n");
                clone.textContent = txt;
                clone.addEventListener('click', () => {
                    console.log(i)
                    textarea.value += `${up}\n`;
                });
                return clone;
            })
            control.append(...buttons);
            document.querySelector(".btn").addEventListener("click", () => {
                navigator.clipboard.writeText(textarea.value)
                alert(`Скопировано:\n${textarea.value}`);
            })
        })
    </script>
</head>
<body>
    <div>
        <h3>Заголовки</h3>
        <textarea id="id_textarea" rows="5" cols="85"></textarea> <br />
        <div class="content">
            <h3>Все заголовки (кликни по заголовку, он добавится в поле справа) </h3>
        </div>
        <br />
        <button type="button" class="btn">Копировать весь список с переносами</button>
    </div>
</body>
</html>

Спасибо! Но немного не то.
Допустим у меня есть большой список
Заголовок 1
Заголовок 2
Заголовок 3
...
Заголовок 50

Его нужно вставить в textarea и весь список вывести во Все заголовки
Далее, при нажатии на заголовок из списка заголовок должен переноситься в textarea2 то есть готовый вариант
Я здесь добавление в textarea2 добавлять научился, но как список пополнить новыми заголовками я хз https://codepen.io/sergiocharm/pen/MWPWMLO

Вот на видео инстурмент который хочу сделать
https://youtu.be/sQr_kIcGLZA?t=365
слева подается полная структура статьи, и из нее уже выбираем что будет в нашей структуре, кликаем и заголовок попадает в правый блок

sergiocharm,
не осилил.