Attach content to div depending of data attribute

Trying to detach an html element with specific data attribute when clicking on link with the same attribute and then attach it to another div. Got code that detects which element was clicked but can't figure out working solution.

Will be glad to any help. Thank you in advance.

        $(document).ready(function() {
            $(".modal-trigger").click(function() {
                var modalContent = $(this);
                var $modalContent = $('.modal-inner').detach();
                $('.modal').append($modalContent).fadeIn();
            });

            $('.modal-trigger').on('click', function () {
                var modalContent = $(this);
                console.log(modalContent.data('content'));
                $('')
            });
 
        });

.modal {
    width: 100px;
    height: 50px;
    background: #999;
    display: none;
    color: #fff;
    padding: 15px;
    text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div id="div">
        <p class="modal-inner" data-content="modal-1">Content 1</p>
        <p class="modal-inner" data-content="modal-2">Content 2</p>
        <p class="modal-inner" data-content="modal-3">Content 3</p>
    </div>

    <a class="modal-trigger" data-content="modal-1" href="#">Trigger 1</a>
    <a class="modal-trigger" data-content="modal-2" href="#">Trigger 2</a>
    <a class="modal-trigger" data-content="modal-3" href="#">Trigger 3</a>

    <div class="modal"></div>