Как с помощью jquery скрипта, при клике на разные кнопки перемещать блок между разными родительскими блоками

Здравствуйте!

Есть следующая конструкция:

$('#button-b').click(function() {
  $('.wrapper-a').css('display', 'block');
});

$('#button-b').click(function() {
  $('.transit-block').insertAfter('#wrapper-b .text-block-b:nth-last-child(3)');
});
div {padding: 10px;}
h4 {text-transform: uppercase;margin: 15px 0px;}
.wrapper-a h4 {color: #d50000;}
.wrapper-b h4 {color: #0583ef;}
.wrapper-a {display: none;}
.button-wrapper,.wrapper-a,.wrapper-b {background: #f7f7f7;padding: 10px 30px;margin: 10px;text-align: center;}
.button-wrapper a {padding: 8px 25px;background: #b50000;color: #ffffff;margin: 10px 5px;display: inline-block;text-decoration: none;}
.text-block-a,.text-block-b {border: 1px solid #e2e2e2;margin: 10px 0px;}
.transit-block {color: #249c24;}
.text-block-b:nth-last-child(3) {color: #ff8300;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="button-wrapper">
  <a id="button-a" href="#">Кнопка А</a>
  <a id="button-b" href="#">Кнопка Б</a>
</div>


<div class="wrapper-a">
  <h4>Блок wrapper-a</h4>
  <div class="text-block-a">Если план А не сработал, не сдавайся — у тебя есть ещё 32 буквы, чтобы попробовать.</div>
  <div class="text-block-a">Иван Иванович Иванов никогда не заполняет никакие бланки. Он просто тупо крадёт образец...</div>
  <div class="text-block-a transit-block">Блок который требуется переместить</div>
</div>


<div class="wrapper-b">
  <h4>Блок wrapper-b</h4>
  <div class="text-block-b">Район у нас тихий… Все с глушителями ходят…</div>
  <div class="text-block-b">Плохие лимоны после смерти попадают в лимонад.</div>
  <div class="text-block-b">На 98% я домашний и скромный человек. Но ох уж эти 2%!</div>
  <div class="text-block-b">Хороший собеседник не только слушает, но и подливает.</div>
  <div class="text-block-b">Маша любила петь... eё рекорд был 40 Петь в месяц.</div>
  <div class="text-block-b">Он держал её за талию,а она его за дурака.Так сидели и болтали: он о любви, а она ногами.</div>
</div>

Задача №1: при клике на кнопку #button-b отобразить скрытый блок .wrapper-a и переместить блок с классом .transit-block из блока .wrapper-a в блок .wrapper-b, при этом расположить перемещаемый блок .transit-block после блока с классом .text-block-b который расположен третьим снизу в блоке .wrapper-b т.е. после блока где текст выделен оранжевым цветом в примере.

Задача №2: При клике на кнопку #button-a вернуть все как было, т.е. .transit-block перемещается обратно из .wrapper-b в блок .wrapper-a, а сам блок .wrapper-a скрывается - display: none;

Помогите реализовать задуманное, дайте пожалуйста ответ в виде скрипта. Я попытался сделать хотя-бы первую часть моей задачи, но мой скрипт не работает.

Благодарю за ответ!


Ответы (0 шт):