Как реализовать перенос изображения из одного div'a в другой или оставить в текущем, через кнопки в модальном окне — JS?

Question

Артём @shindayoni

Студент

JavaScript

Как реализовать перенос изображения из одного div'a в другой или оставить в текущем, через кнопки в модальном окне — JS?

Искал подобные вопросы, но так и не нашел ничего, что подходило бы под условие моей задачи. Помогите пожалуйста..

Задача: "Реализовать в документе 2 вертикальных ряда картинок в левой и правой части окна. При щелчке на картинку она должна в увеличенном виде отображаться в центре документа в модальном режиме с двумя ссылками «вправо» и «влево», позволяющими или перенести картинку в противоположный список, или вернуть в первоначальный."

Собственно столкнулся со следующими трудностями:

Я не знаю, как реализовать перенос из одного контейнера в другой (возможно это гораздо проще решается использованием таблицы или только ей).
Не значительно, но если вы сможете подсказать как отобразить в одном div'е изображения вертикально (не прибегая к тэгу br в разметке) то буду отдельно благодарен.

Код:

// modal.js
var modal = document.getElementById('Modal');
var modalImg = document.getElementById('img01');
var span = document.getElementsByClassName('close')[0];

var img;

for (var i = 0; i < 4; i++) {
    img = document.getElementById('img' + i);
    img.onclick = function() {
        modal.style.display = "block";
        modalImg.src = this.src;
    }
}

span.onclick = function() {
    modal.style.display = "none";
}

<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS</title>

    <!-- CSS Connect -->

    <!-- Сбрасывает стили браузера -->
    <link rel="stylesheet" href="./css/reset.css">

    <!-- Собственные стили -->
    <link rel="stylesheet" href="./css/main.css">
    <link rel="stylesheet" href="./css/modal.css">
</head>

<body>
    <div class="F-Container">
        <img src="./img/img01.jpg" id='img' alt="shoes">
        <img src="./img/img02.jpg" id='img' alt="shoes">
    </div>
    <div class="S-Container">
        <img src="./img/img03.jpg" id='img' alt="cap">
        <img src="./img/img04.jpg" id='img' alt="cap">
    </div>

    <div class="Modal" id="Modal">
        <span class="close" onclick="document.getElementById('Modal').style.display='none'">&times;</span>
        <img class="Modal-content" id="img01">
        <div class="btns">
            <button id="b-left">&larr;</button>
            <button id="b-right">&rarr;</button>
        </div>
    </div>

    <!-- JS connect -->
    <script src="./js/modal.js"></script>
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> -->
</body>

</html>

/* main.css */
.F-Container,
.S-Container {
    margin: 50px;
    padding: 25px;
    border: 2px solid #000;
}

.F-Container img,
.S-Container img {
    object-fit: cover;
    width: 300px;
    height: 200px;
}

.F-Container {
    float: left;
}

.S-Container {
    float: right;
}

/* modal.css */
.Modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.8);
}

.Modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

.btns {
    margin-top: 15px;
    text-align: center;
}

#b-left,
#b-right {
    display: inline-block;
    background-color: #151515;
    color: #ffffff;
    text-align: center;
    padding: 10px;
    margin: 0 5px 0 5px;
    text-decoration: none;
    border: none;
    width: 100px;
    font-size: 32px;
    cursor: pointer;
}

.close {
    position: absolute;
    top: 40px;
    right: 45px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbbbbb;
    text-decoration: none;
    cursor: pointer;
}