javascript - Handling lots of id's in HTML -

i'm new web design , have problem don't know how solve in eloquent way. have 7 weekday elements, each 2 dropdowns. dropdown has 24 options, 1 each hour of day. means 336 possible options user can click on in total.

i need assign function each of 336 elements update text in corresponding box dropdown menu came from.

i know how i'm trying achieve, i'm not sure how 'properly'. write function updates text based on clicked on. go through , manually assign unique id each of 336 elements, write function loops through , assigns first function of them. although mean manually assigning 336 unique id's in html. feels wrong this? there better way?

i feel i'm missing obvious make easier - maybe i'm taking wrong approach?

you should not use ids , use single event elements.

there's concept called event delegation, attach event parent node, , handle event child nodes. since events "bubble up" in javascript, event hit parent node , trigger it. when happens, can check original target of event, , check if it's 1 of classes care about.

here's example: https://davidwalsh.name/event-delegate

many libraries offer own support this, it's pretty easy do.