jQuery click event doesn't work on dynamicly add element

Question

I have a script that adds html element(.group-item) into container then by clicking on a link(.dismiss-selected-reward) within this element I'm trying to capture the click event and execute something, which doesn't work. If I place this element staticly in the container the event handler works! I have other click events within the same page and they all work. No duplicated id's or any other errors. All scripts are placed at the end of the page within $(document).ready(function () { code });. If I attach the event to anything outside of the dynamic element it fires ...

let selected = e.params.data;

let element = `<div class="group-item" data-element-id="${selected.id}"> <div class="wrapper"> <img class="float-left" src="/assets/images/chuck.jpg" alt="Image ${selected.title}"/> <h5 class="title">${selected.title}</h5> <p class="description overflow-hidden">${selected.description}</p><a href="#" class="btn btn-link dismiss-selected-reward" data-parent-id="${selected.id}"> <span class="align-middle sr-only">Remove</span> <i class="mdi mdi-close-circle-outline font-20 align-middle"></i> </a> </div></div>`;

$(element).insertBefore(`${surprisesSelectedContainer} .placeholder`);

$(".dismiss-selected-reward").on("click", function (e) {
    e.preventDefault();
    console.log("click");

    let parent = $(this).data("parent-id");

    $(`#surprise-rewards option[value="${parent}"]`).val("").trigger("change");

});

<div class="form-group">
    <label class="test">Selected</label>
    <div id="selected-surprises-group" class="selected-surprises-group">

        <div class="group-item" data-element-id="${selected.id}">
            <div class="wrapper">
                <img class="float-left" src="/assets/images/chuck.jpg" alt="Image ${selected.title}" />
                <h5 class="title">${selected.title}</h5>
                <p class="description overflow-hidden">${selected.description}</p>
                <a href="#" class="btn btn-link dismiss-selected-reward" data-parent-id="${selected.id}">
                    <span class="align-middle sr-only">Remove</span>
                    <i class="mdi mdi-close-circle-outline font-20 align-middle"></i>
                </a>
            </div>
        </div>

        <div class="group-item placeholder align-middle"><p class="align-middle">Selected Reward</p></div>
    </div>
</div>