How to add event handlers to button elements rendered in an OL using Javascript and get the index position?

I’m trying to build a simple to do list application. I’ve linked my input field to an array which gets rendered out as an ordered list, and there are two buttons added to each item, one to state “completed” and one for “remove”.

I’ve having difficulty with two parts: 1) adding event handlers to the buttons rendered out in the OL (I’ve managed to in the code below but I’m not sure if it’s the right way. Part 2) identifying the index of the item so that I can modify it with the completed and remove buttons.

I’ve tried to use event delegation to tackle part 1 but I’m not sure if this is correct, and I don’t know how to relate it to part 2.

document.getElementById("parent-list").addEventListener("click", function(e) {
    if(e.target && e.target.nodeName == "BUTTON") {
        console.log(e.target);
    }
});