show.bs.modal not showing dynamic content

I have an array of objects I would like to push into a show.bs.js modal. Each object has it's own button each button should fire an event that pushes the information inside of the object into the modal accordingly. But the modal isn't taking in the information.. I'm uploading my code for suggestions.

html

    <div class="modal" id="myModal" tabindex="0" data-toggle="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>


    </div>



<div class="modal" id="myModal" tabindex="0" data-toggle="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>


    </div>

js ------------------This is appended through Jquery

    



let $modalButton = $('<div class="card-footer w-100 bg-dark" id="card-footer' + x + '"><button class-"btn mx-auto w-100 d-block text-secondary border-none modal-btn"id="' + pose + '"data-toggle="modal"data-target="#myModal" data-name="' + name + '" data-desc="Description: ' + desc + '"data-step="THIS IS HOW YOU ACCOMPLISH IT: ' + steps + '"><span class="border-bottom">View More</span></button></div> ')
        $("#card" + x).append($modalButton)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>





----------show.bs.modal



$("#myModal").on('show.bs.modal', function (event) {
            console.log('clicked')

            let button = $(event.relatedTarget)
            let typeHere = button.data('name')
            let descHere = button.data('desc')
            let stepHere = button.data('step')
            let modal = $(this)
            modal.find('.modal-title').text(typeHere)
            modal.find('.modal-body').text(descHere)
            modal.find('.modal-footer').text(stepHere)
        }).modal('show')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

let poses =[{
        name: "Banana",
        pose: 'banana',
        img: `./images/banana_R.png`,
        type: 'Lorem ipsum dolor sit, amet',
        prop: 'consectetur adipisicing elit.',
        desc: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non, cumque. Obcaecati fugiat ut inventore ratione magni aliquam quis unde non saepe? Eaque id perspiciatis modi laborum optio soluta quibusdam veniam.',
        steps: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non, cumque. Obcaecati fugiat ut inventore ratione magni aliquam quis unde non saepe? Eaque id perspiciatis modi laborum optio soluta quibusdam veniam.'
    },{
        name: "Bound Angle",
        pose: 'boundangle',
        img: `./images/bound_angle_forward.png`,
        type: 'Lorem ipsum dolor sit, amet',
        prop: 'consectetur adipisicing elit.',
        desc: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non, cumque. Obcaecati fugiat ut inventore ratione magni aliquam quis unde non saepe? Eaque id perspiciatis modi laborum optio soluta quibusdam veniam.',
        steps: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non, cumque. Obcaecati fugiat ut inventore ratione magni aliquam quis unde non saepe? Eaque id perspiciatis modi laborum optio soluta quibusdam veniam.'
    }]