Skip hidden tab indexes

I have the following html:

<span tabindex="19">

</span>

<span tabindex="20">

</span>

<span tabindex="21">

</span>

<span id="hidden" tabindex="22">

</span>

<span tabindex="23">

</span>

<span tabindex="24">

</span>

As you can see one of the span is hidden, the code to hide it is

#hidden
{
display: none;
}

I want a behavior where tab skips the hidden indexes. So i want something like this when i click tab:- go to 19,20,21,23,24

I have no way of controlling the tab indexes as they are coming hard coded in the html i process.