HTML "self-awareness" with sibling indexing in JavaScript

This is a super specific use case, but if you have an HTML element and you want it to be more "self-aware", you can do:

let element = document.getElementById('whatever');

// To get an array of siblings
[...element.parentElement.children]

// To get current index of self
[...element.parentElement.children].indexOf(element)

What we're doing here is:

• Getting our HTML element
• Getting the parent of our HTML element
• Getting the children of the parent
• Spreading it into an array (because it's an HTMLCollection otherwise, you can also use Array.from)
• Getting the index of our element amongst all of its siblings

I figured this out after working on a framework-less project, where I wanted an HTML <button> to be able to tell the function it called its own index.

Example HTML:

<div>
    <button onclick="whoami(event)">Some button</button>
    <button onclick="whoami(event)">Some other button</button>
    <button onclick="whoami(event)">And other button</button>
</div>

And the corresponding example JavaScript:

function whoami(event) {
    let element = event.currentTarget;
    let currentButtonIndex = [...element.parentElement.children].indexOf(element);
    // ...and so on
}

Anyway, I thought this was cool, hope it's useful for you!