JSFiddle - React, Tailwind, and code Playground

by Daniel Tan

HTML

<section class="hardware">some text</section>
<section class="hardware">some text</section>
<section class="hardware">some text</section>
<section class="hardware">some text</section>
<section class="hardware">some text</section>

<section>container
    <section class="hardware">some nested text</section>
</section>

<section>container
    <div>some nested div</div>
    <section class="hardware">some nested text</section>
</section>

CSS

body > section {
    border: 1px solid;
}

.hardware::after {
    content: ':nth-child(' attr(data-number) ')';
}

JavaScript

var selector = document.getElementsByClassName('hardware');

for (var i = 0; i < selector.length; i++) {
    var element = selector[i];
    var child = element.parentNode.firstChild;
    var index = 0;
    
    while (true) {
        if (child.nodeType === Node.ELEMENT_NODE) {
            index++;
        }
        
        if (child === element || !child.nextSibling) {
            break;
        }
        
        child = child.nextSibling;
    }
    
    element.dataset.number = index;
}