I'm struggling with the CSS counter mechanism(s)

[s3a]

Homework Statement

There's a visual representation of what I am aiming for, in Question 1's Figure 2.:
https://www.docdroid.net/P6VZNB1/soe...df.html#page=3

Homework Equations

https://www.w3schools.com/CSSref/pr_gen_counter-increment.asp

The Attempt at a Solution

Hello to everyone who's reading this.

I looked at various websites, including several YouTube videos, but still I'm really struggling with CSS counter stuff. Basically, all I am trying to do is to make the numbering of an ordered list continue when the ordered list goes from row n to row n+1.

The following is my HTML syntax.:
http://pastebin.com/hw8rmUWB

The following is my CSS syntax, where the last three selectors are what I'm struggling with (as indicated by the comment).:
http://pastebin.com/cYFynxAs

Could someone please help me figure out why the numbering is showing twice in each table cell (despite the CSS incrementation seemingly working semi-correctly)? It seems like the CSS is creating some different numbering, rather than modifying the default numbering of unordered lists.

Any help in figuring out why what I am trying to accomplish is not working would be GREATLY appreciated!

 

[stevendaryl]

For one thing, I don't think you get to name your own counters--I think you have to use "section" and "subsection".

There is a tutorial that might help here:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters