retrieve id from a div inside a list of json objects in pure Javascript

I have searched for possible solutions online but did not find any solutions that actually work.I have tried multiple approaches but sadly none of them work according to the way that I need it work in this specific regard. I saw that I could use the href and button approach using the router but this is sadly not the specific solution required in this instance.

Basically I need to get the id value of a specific object displayed in a html list when a button is clicked on the browser. Say a list displays 2 json objects in html then when button 2 in the list is clicked I want to retrieve the id of that second element in the list to display later in another list or save it later in a database or whatever is clever.

The code of the list and array of objects is added here but code so far of how I tried to solve this is not listed because none of my attempts even worked and each attempt failed dismally(a bit over reacting but hey) :=(

So basically I need help and advice :=)

var details = [

    {
        id: 0,
        department: "HR",
        name: "samy",
        
    },
    {
        id: 1,
        department: "Accounting",
        name: "william",
        
    }


];

function displaydetails(parent, array) {
    var html = "";

    for (i = 0; i < array.length; ++i) {
        //Set Our Itemp template
        let itemTemplate = `
  <li>
     <h2>${array[i].department}</h2>
     <div>name:  ${array[i].name}</div>
     <div>id:     ${array[i].id}</div>
     <div>  <button   id='retrieve-ID'  > GET ID </button>  </div>
     
  

  </li>`;
        //update the html 
        html += itemTemplate
    }
    //Update the parent once
    parent.innerHTML += html;
}

displaydetails(document.getElementById("detailslist"), details);