JSFiddle - React, Tailwind, and code Playground

by tenonic

HTML

<p numbered="1">para</p>
<p numbered="1">para</p>
<p numbered="1">para</p>
<p numbered="1">para</p>
<p numbered="1" id="test" restart-numbering="true">para</p>
<p numbered="1">para</p>
<br><br><br>
<button onclick='toggle()'>
Toggle
</button>

CSS

p[numbered="1"] {
    counter-increment: numbered1;
}
p[numbered="1"]:before {
  content: counter(numbered1)'.';
}
p[numbered="1"][restart-numbering="true"] {
  counter-reset: numbered1;
}

JavaScript

function toggle() {
let el = document.querySelector('#test');
let restarting = !!el.getAttribute('restart-numbering');
if (restarting) {
	el.removeAttribute('restart-numbering');
} else {
el.setAttribute('restart-numbering', true);
}
}