Event listener not firing when created at the same time as html

This event listener wont fire, have I built it correctly?

I am trying to add the event listener when each new line is added after being fetched from the database.

const renderEmployee = (element) =>{

let newRow =
`
<tr>
    <td>${element.lastName}</td>
    <td>${element.firstName}</td>
    <td>${element.email}</td>
    <td>${element.department}</td>
    <td>${element.location}</td>
    <td>
        <button data-empid="${element.id}" id="${element.id}Del"><i class="fa fa-trash" aria-hidden="true"></i></button>
        <button data-empid="${element.id}" id="${element.id}Edit"><i class="fas fa-edit"></i></button>
    </td>
</tr>

`
document.getElementById("employeeData").innerHTML += newRow;

// set event listeners for delete and edit 
$(`#${element.id}Del`).click(() => deleteEmployee($(`#${element.id}Del`).attr("data-empid")));
$(`#${element.id}Del`).click(() => console.log("test"));

}