JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li name="3">one</li>
  <li name="4">two</li>
  <li name="5">three</li>
  <li name="6">four</li>
  <li name="1" class="active">five</li>
  <li name="2">six</li>
  <li name="3">seven</li>
  <li name="4">eight</li>
  <li name="5">nine</li>
  <li name="6">ten</li>
  <li name="1">eleven</li>
  <li name="2">tweleve</li>
</ul>

JavaScript

var activeVal = $( "li.active" ).attr('name');
var nextl = $( "li.active" ).nextAll().length;

$( "li.active" ).nextAll().each(function(i){
    console.log(i);
    $(this).attr('name',function(){
        return i + parseInt(activeVal) + 1;
    });    
}).end().prevAll().each(function(i){
    console.log(i);
    $(this).attr('name',function(){
        return i +parseInt(activeVal)+1;
    });    
});