The template subtree has a hidden part, the top row that contains a red delete button. In this part, you'll add event handlers to show and hide the delete buttons for each row on mouse over.

The event handler needs to be added after you clone the template and before you insert it. You can call addEventListener directly on the copied node (e.g. item). cloneNode does not copy event handlers, so you cannot pre-hook them onto the template. Since the code in that loop over the retreived data is getting more complex, you should refactor that code into a separate (named) function to keep it neat.

Inside the event handler, you need to refer to the delete row to make it visible. There are two main ways to refer to the element that the event fired on. Note that you cannot use this as it doesn't not rebind to the element with an "arrow" function.

// in this example, we use 'e', the handler event parameter, to access the target of the event
some_node.addEventListener('click', e => {
  console.log("You clicked on " + e.currentTarget);
});

  // in this example, we use the reference to the element that we already have (it's still in scope)
  some_node.addEventListener('click', e => {
    console.log("You clicked on " + some_node);
  });

Once you have a reference to the root element, you use the same strategy that you used to manipulated the text, speaker, and source. Add a unique-to-the-template class to the template row that you want to make visible, and then use getElementsByClassName in the handler to get to it.