JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="ul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
</ul>

CSS

li {margin-left:20px}

JavaScript

function prev(n)
{
    while(n=n.previousSibling)
        if(n.nodeType^3) return n;
    return 0
}
function next(n)
{
    while(n=n.nextSibling)
        if(n.nodeType^3) return n;
    return 0
}
function owNNum(el,par)
{
    par = par||el.parentNode;
    var p = n = el, flag, first = next(par.firstChild), last = prev(par.lastChild);
    for(i=0, j = par.children.length; i<j; i++)
    {
        if((flag = first!==p) && last!==n)
        {
            p = prev(p);
            n = next(n);
        }
        else break;
    }
    return flag ? j-i : ++i
}
document.getElementById('ul').onclick = function(e)
{
    e=e||window.event;
    t=e.target||e.srcElement;    
    if(t.tagName == 'LI')
    {
        alert(owNNum(t, this));
    }
}