Reverse the numbering order for ordered lists

Question

I would like to have the numbering of the ordered list in descending order. live example here:

demo

But instead of having the counte span multiple ol, I would like the counter to reset after each ol.

So, the desired result for the live demo would be:

[3] 1
[2] 2
[1] 3

[2] 4
[1] 5

Does anyone have an idea how to modify the code from the live demo (or know a better solution that is supported by most browsers) to have the above behavior?

Also, is there a way to make the [ ] "copyable" with copy-paste to Word docs or any open source alternative? Because for the above example it interprets only the numbers without the square parenthesis.

Answer 1

You have to set the counter-reset value for each ol is equal to the number of child + 1

var ol_elements = document.getElementsByTagName("ol");
//console.log(ol_elements[0].children.length)
for (var i = 0; i < ol_elements.length; i++) {
  ol_elements[i].setAttribute('style', 'counter-reset: item ' + (ol_elements[i].children.length + 1));
}

body {
  font: 13px Verdana
}

ol {
  list-style-type: none;
  margin-left: 20px;
  padding: 0px;
}

ol>li {
  counter-increment: item -1;
}

ol>li:before {
  content: "[" counter(item) "]";
  padding-right: 10px;
}

<div id="content">
  <ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ol>
  <ol>
    <li>4</li>
    <li>5</li>
  </ol>
  <ol>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
  </ol>
</div>