jQuery Dynamic Element Click Handler Nor working

Question

I am just creating simple example of jQuery events for dynamic elements. I am unable to execute the click handler. Anything I am doing wrong here?

$(document).ready(() => {
    $('#addTrip').click(addATrip);

    $('table#myTrips tr td button').click(function(evt) {
        alert($(evt.currentTarget).attr('list-item'));
    })  

    $('table#myTrips tr td button').on('click', function(evt) {
        alert($(evt.currentTarget).attr('list-item'));
    });
});

var listItem = 7;
function addATrip() {
    listItem++;
    $('#myTrips tbody').append(`
        <tr>
            <td>
                <button list-item="${listItem}">Click Mee</button>
            </td>
        </tr>
    `)
}

HTML Code

<table id="myTrips">
        <tr>
            <td>
                <button list-item="5">Click Mee</button>
            </td>
        </tr>
        <tr>
            <td>
                <button list-item="6">Click Mee</button>
            </td>
        </tr>
        <tr>
            <td>
                <button list-item="7">Click Mee</button>
            </td>
        </tr>
    </table>


    <button id="addTrip">Add Trip</button>

Appreciate your help.

Thank you, Ankit