JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="demo">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

What it <b>Should</b> look like:<br>
<ul>
    <li>100</li>
    <li>200</li>
    <li>300</li>
    <li>400</li>
    <li>500</li>
</ul>
<button>Change increment</button>

CSS

.demo {
    counter-reset: list;
}

.demo li:before {
    content: counter(list);
}

JavaScript

var myUnit = 100;
    $(".demo li").css("counter-increment", "list " + myUnit);
    $("button").click(function(e) {
        $(".demo li").css("counter-increment", "list " + 200);    
    });