Of course it shows again, because all the page is re-created from scratch and the scripts are executed exactly as the would do the first time. Basically, you could do two things: either store the data on states of all controls on the server side by sending this data via Ajax, or store this data locally using
Web storage.
I don't want to discuss using postbacks and server-side processing "on every click". Such approach is already heavily abused on many sites and mostly only wastes traffic and irritates the users with numerous delays. Ajax is better because you transmit much less data and, in your particular case, you don't have to update anything on the page: it happens only on client side (exactly as you already achieved that), and the data transmitted via Ajax will only be taken into account in the ASP.NET generation of scripts on next page reload.
However, I would rather recommend the pure client-side approach,
Web storage:
http://en.wikipedia.org/wiki/Web_storage[
^].
This approach is more universal. You
separate concerns: the server-side behavior is not taken into account, and the server side is kept unaware of changed states of controls. This separation of implementation of features facilitates maintenance.
There are two aspects here. Firstly, use
sessionStorage
object, not
localStorage
. Secondly, to put all the states of all controls to storage at the same key and reduce
ad hoc coding, you can use embedded JSON object. This is all explained in one section of my article, which comes with the source code which you can use as a complete sample implementation of this technique:
JavaScript Calculator, 7. Dynamic Strict Mode Switching and Web Storage.
—SA