Javascript - saving section of page to DB?

[#1]

Hi guys,

Tried searching the interweb for this, nothings really helping..

I have a site i'm working on locally. As well as the usual log in/out i'd like to be able to lock a certain part of the screen. For this i figured i could simplyclick the lock link on the menu, the JS would grab the html from that div, send it via ajax to the server to be stored and then send it back when i click unlock with a password. Sounds simple right?

Here's the thing, it's a global template which is used and the section of the page i want to lock is the only bit which changes. On one page it might display email, on another it might display a form:

(excuse the dodgy colouring, i'm still tinkering with the css between working on features)

Now the problem I have... See the two checkboxes that are ticked? - If i use JS to grab the source for that entire div, it doesn't preserve the checkmarks.

If i use Content.cloneNode(true); then it does preserve them however I cannot successfully serialize that node and preserve the ticks - it just serializes the html for the node but doesn't save the state of the checkboxes.

I need to find a way to dynamically preserve whatever is on the page in a way that it can be restored to exactly the way it was.

Any help?

[#2]

Here's a basic demo of the problem online: https://www.w3schools.com/code/tryit.asp?filename=GSAC1SDMILWO

Just to recap, i can save the html from the div, but it's the state of anything in it (in this case checkboxes) that don't save.