javascript - Implement repeating behaviors with numerous amount but same html elements -

let's have group of html element js fiddle behaviors. having 1 of easy on html page.

but best practice of having 1000 of them (the same js fiddle) on page? not dynamically generating required html elements more importantly generating behaviors/js codes each individual element (with different values , id).

an example:

document.getelementbyid("id1").onchange = function () {  //some complicated behaviors }; 

generate id2/id3/id4...id1000 version of above codes in run time when needed. note must running on html environment no servers. select options/data stored in same html file (as array or sort).

any advice or suggestions appreciated.

ideally, rather loading possible options in dom, use ajax fetch next set of options server. when select state, goes , grabs counties state, when select county, goes , grabs cities state.

to go further, when select state, sends selected state server fetch counties state. when select county, sends server can fetch cities.

you can use server side language of choice of course (php, asp.net, ruby, python, etc.)

otherwise, you're injecting ton of data in dom never used , vastly increase load times; whereas ajax pretty fast.

there lots of tutorials regarding use of ajax i'm not going cover in answer, best solution.