JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <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>
</div>
<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);
}

let ctr = document.querySelector('#container');
ctr.style.display='none';
ctr.offsetHeight; // no need to store this anywhere, the reference is enough
ctr.style.display='';

}