Creating Inline Incremental Counter Buttons

Help
1

What I’m trying to do

I keep a table of all the different stuff I read, and am sick of having to edit the chapter or volume number every time, so I thought I would create a button for incrementing the count by one.
since it’s in a table, the button needs to be inline, and needs to edit the preceding number. It’s a big table, and I have no plans to reference this data elsewhere, so no frontmatter shenanigans.

Things I have tried

I have limited experience in HTML and javascript, so I started by seeing if anyone had tried to do the same thing. I found some helpful material, a couple used Meta-Bind to create incremental counters, but these either require creating properties in the frontmatter, or using getElementById() and I don’t want to have to create and edit buttons every time I start reading something new, just duplicate a row and edit a little text.

I then started messing around in normal HTML and javascript, just to get working code, and adapt it later. (just this took a couple hours, especially since I was missing a “)” and was being blind, lol)

function increment(element) {
    	var tempcount = parseInt(element.parentNode.childNodes[0].nodeValue);
        tempcount++;
        element.parentNode.childNodes[0].nodeValue = ""+tempcount;
    }

<div>
	0
	<button onclick="increment(this);">+</button>
</div>

After some more poking around, I found out that js doesn’t run in tags like normal, and specifically onclick doesn’t work for security reasons. Back to the drawing board. I figured the DOM manipulation and js were still useful, so I started to look for ways to create an inline button that can run js. I looked at customJS, RunJS, and dataviewjs, but thought the meta-bind button inline js was probably my best bet.
I tried creating an inline button like this:

0BUTTON[Increment]

from this button:

label: +
icon: ""
style: default
class: ""
cssStyle: ""
backgroundImage: ""
tooltip: ""
id: Increment
hidden: false
actions:
  - type: inlineJS
    code: var tempcount = parseInt(this.parentNode.parentNode.parentNode.childNodes[0].nodeValue);tempcount++;this.parentNode.parentNode.parentNode.childNodes[0].nodeValue = ""+tempcount;
    args: {}

note that I just run the code instead of defining a function, and that I used parentNode 3 times since devtools says that the button element is 3 layers from the div containing the “0.” I tried 1 and 2 times as well, just in case, and neither worked.

I then tried to get it working with running a js file instead of inline js, just to cover my bases. I created increment.js:

var tempcount = parseInt(context.arg.element.parentNode.parentNode.parentNode.childNodes[0].nodeValue);
tempcount++;
context.arg.element.parentNode.parentNode.parentNode.childNodes[0].nodeValue = ""+tempcount;

and a new button:

label: "+2"
icon: ""
style: default
class: ""
cssStyle: ""
backgroundImage: ""
tooltip: ""
id: Increment2
hidden: false
actions:
  - type: js
    file: Javascript/increment.js
    args: {element:this}

I have no idea if the “this” I’m passing as an arg is actually correct, and I’m well beyond my level of expertise at this point. And so here I am. I’m willing to hear any and all advice.