如何在另一个 div 上克隆一个 div jquery

Question

Im currently trying to clone a div, create it on top of the original, and then have it slide off the screen. Unfortunately I can't get it to align properly with the original div when cloned.

main.js

    var container = $("#pagecontainer");
    clone = container.clone()
    clone.attr('class', 'movingcontainer');
    var destination = container.offset();
    clone.css({top: destination.top, left:destination.left});
    clone.appendTo('#wholecontainer');

    clone.animate({
        right: '-100%'
    },
    {
        duration: 400,
        complete: function() {
        clone.remove()
    }},
    500, 
    function() {
        clone.css('right', '100%');
        clone.appendTo('#body');
    });

style.css

    .movingcontainer {
        position: absolute;
        background-color: #fff;
        width: 560px;
        height: 146px;
        display: flex;
        text-overflow: 0px;
        color: black;
        z-index: 10;
        border: none;
        margin: 0;
    }

    .movingcontainer .like, .movingcontainer .dislike {
        width: 50px;
        height: 100%;
        border: none;
        padding: none;
        margin:0;
    }

    .pagecontainer {
        display: flex;
        min-width: 70%;
        margin: 0;
        position: absolute;
        margin-top: 10%;


    }
    .wholecontainer {
        position: absolute;
        min-width: 70%;
        max-height: 210px;
        display: flex;
        flex-direction: column;
        margin-left: 25%;
        margin-right: auto;
        align-items: center;
    }   

index.html

<div class="wholecontainer" id="wholecontainer">
    <button class="createpost" type="button" name="createpost">
        <td>Create Post</td>
    </button>
    <div class="pagecontainer" id="pagecontainer">
        <script type="text/javascript">var token = '{{ csrf_token }}';</script>
        <button type="button" name="dislike" class="dislike" value="dislike?{{ post.id }}"  id="dislike" onclick="like(this)">
            <i class="fas fa-times fa-3x dislikex"></i>
        </button>
        <div class="postcontainer" id="postcontainer">
            <h1 class="posttitle" id="posttitle">{{ post.title }}</h1>
            <h1 class="postcontent" id="postcontent">{{ post.content }}</h1>
            <h3 class="postdate" id="postdate">{{ time_since }}</h3>
        </div>
        <button type="button" name="like" class="like" value="like?{{ post.id }}" id="like" onclick="like(this)">
            <i class="fas fa-check fa-2x likecheck"></i>
        </button>
    </div>
</div>

It may have something to do with the wholecontainer parent being bigger than the div as it includes the create post button. Without the create post and having the div at the top of the screen works fine, however I need the button and to have the div near the middle. Any ideas?

Answer 1

Whoops, just needed to add a margin-top: 10% to the cloned div.