JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li id="1" tabindex ='-1' >hi</li>
    <li id="2" tabindex ='-1' >hi</li>
    <li tabindex ='-1' >hi</li>
    <li tabindex ='0' >hi</li>
    <li id="3" tabindex ='0' >hi</li>
    <li id="4" tabindex ='0' >hi</li>
    <li tabindex ='0' >hi</li>
    <li>hello</li>
    <li id="5">hello</li>
    <li id="6">hello</li>
    <li>hello</li>
</ul>

CSS

ul > li:focus {
    outline: 1px solid black;
}

JavaScript

function myFunction() {
    document.getElementById("6").focus();
}