JSFiddle - React, Tailwind, and code Playground

by Ade Sanmi

HTML

<h2>Dynamically create and reset tabIndex of an HTML elements.</h2>
The tabindex attribute specifies the tab order of an HTML element, such as set of "li","a" e.t.c.
The tabindex attribute is supported in all major browsers.
For this instance let set tabindex for list items "li".
Usally tabidex will start from '0', however we can reset it to start from '1'. I am using Jquery to do this.
<hr/>
<h3>Name Some Fruits</h3>
<hr/>
<ul id="dfruits">
<li>Apple</li>
<li>Dragonfruit</li>
<li>Damson</li>
<li>Cloudberry</li>
<li>Blueberry</li>
<li>Cherry</li>
<li>Blackcurrant</li> 
<li>Coconut</li>
<li>Avocado</li>   
 <li>Pinaple</li>     
</ul>

CSS

ul#dfruits li{
width : 250px;
height : 40px;
padding:10px;
border-bottom:2px solid #005555;
margin:5px 0 0 5px;
background-color:#00ccff;
display: block;
position:relative;
}
ul#dfruits li:nth-child(2n+2){color:red;}

JavaScript

$(document).ready(function() {

var 
SomeFruitsList=$("ul#dfruits li"),
//set tab index to starts from 1
tabindex = 0;	
    
SomeFruitsList.each(function() {
 // add tab index number to each list items
  tabindex++; 
$(this).attr("tabindex",tabindex); 

var tabIndex = $(this).attr("tabindex");
 // add tab index number to each list items as their title   
$(this).attr("title","TabIndex  " +tabIndex);
    
    $(this).append('<br/><em>My tabIndex is number:    '+tabIndex+'<em>')
})
    });