Javascript-форум - Добавление строк разного содержания после каждой существущей

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

- jQuery (https://javascript.ru/forum/jquery/)

- - Добавление строк разного содержания после каждой существущей (https://javascript.ru/forum/jquery/67877-dobavlenie-strok-raznogo-soderzhaniya-posle-kazhdojj-sushhestvushhejj.html)

Добавление строк второго текста в первый

Объясню поподробнее в чем проблема. Есть два текста, состоящих из нескольких строк. Нужно каким-то образом по клику совместить их в один таким образом, чтобы строки разных текстов чередовались.

Пробовал простым перемещением, но выходило, что полный текст вставлялся после каждой строки.

<div>
  <button id="two">2</button>
  <button id="one">1</button>
</div>

<div class="text">
  <div class="first">А</div>
  <div class="first">Б</div>
  <div class="first">В</div>
  <div class="first">Г</div>
</div>

<div class="text_2">
  <div class="second">1</div>
  <div class="second">2</div>
  <div class="second">3</div>
  <div class="second">4</div>
</div>

$(function(){
  $('#one').click(function() {
    $('.second').appendTo($('.first'));
  });
});

Желаемый результат:

А
1
Б
2
В
3
Г
4

Есть у кого идеи? Может вообще есть другой путь решения проблемы? Заранее спасибо!

Цитата:

Сообщение от Wreck-It-Ralph

Желаемый результат:

можно в html?

<div class="text">
  <div class="first">А</div>
  <div class="second">1</div>
  <div class="first">Б</div>
  <div class="second">2</div>
  <div class="first">В</div>
  <div class="second">3</div>
  <div class="first">Г</div>
  <div class="second">4</div>
</div>

<div class="text_2">
</div>

В идеале как-то так, и чтобы это можно было в обратное состояние вернуть

Wreck-It-Ralph,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function(){
  var sec = $('.second'), fst = $('.first');
  $('#one').click(function() {
   fst.after(function(i) {
   return sec[i]
    })
  });
  $('#two').click(function() {
   sec.appendTo(".text_2")
  });
});

  </script>
</head>

<body>
<div>
  <button id="two">2</button>
  <button id="one">1</button>
</div>

<div class="text">
  <div class="first">А</div>
  <div class="first">Б</div>
  <div class="first">В</div>
  <div class="first">Г</div>
</div>

<div class="text_2">
  <div class="second">1</div>
  <div class="second">2</div>
  <div class="second">3</div>
  <div class="second">4</div>
</div>

</body>
</html>

Спасибо огромное! :thanks: