Using checkboxes to update UI in realtime

Evening all,

I'm currenty in the process of trying to develop a smarter UI for one of my clients. However there is a twist! The only code I can use to develop this 'feature', is Pure JS. I have no access to the source HTML or CSS files the only access I have is the ability to inject Javascript through an external .js file. I'm not too farmiliar with JS, but I can work my way around a basic script or two.

Scinario

I'll try to break down the scinario. Essentially what were doing is allowing users to edit PDF Templates online using a software called Core Create. The UI accessed through the browser is quite cluttered and I would like to provide an option to hide and show UI elements <textareas>/<inputs> through the use of checkboxes.

Here is a very basic JS Fiddle that I have built with the intention of hiding and displaying UI.

The page in question

Above is a screen grab of the page I am working with, on the left you can see the UI and its composition on the right within the 'Inspect Element' tool.

I have come to the conclusion that I need to iterate through the highlighted selection and link them accordingly with seven checkboxes. The result would then be a selection of checkboxes that would hide / display the correct UI element.

The Caveat

In realising I cannot edit or introduce new HTML I noticed the lack of on-click attributes. So I'm a bit lost on how to invoke the Javascript I will eventually build.

My Question

With my limited knowledge of JS I don't know how I would iterate though div elements editoraccvar - editoraccvar6 picking out the ones I need to manipulate.

Due to the lack of ID's / Names (I assume it would have to be done using Parent/Child rules somehow, as the classes are widley used by the rest of the UI. I would appreciate a small example demonstrating how I could achieve this, so I can learn from it.