Any value in JavaScript/HTML Decoupling? if so how? -

lately i've been writing more , more javascript websites i've been creating. , can't think i'm doing wrong, or there has better way.

i have clean separation of concerns on server side, on client side, find myself having entire sections of javascript dependent on specific element id's , class names, etc. example, on 1 page, has lot of form fields, may have section of code looks like:

$(document).ready(function() {      $("#buttonid1").button();      $("#grid").somegridfunction();      $(".data-fields").datepicker();      $(".submit-links").click(function() { this.closest("form").submit(); }); }); 

what i'd prefer way html elements request obtain functionality. like:

<input type="text" data-make="datepicker" /> 

but flawed, because customization of require more , more attributes on html element detail specifics. had similar setup done knockoutjs , wasn't happy html required.

maybe along lines of this:

<input type="text" data-init="builddefaultdatepicker" /> 

where "builddefaultdatepicker" javascript function handles necessary work.

in end, question have 2 fold. there value in separating javascript ui in regards specific element ids , class names. , if so, patterns, , or methods have used achieve this?

(note, i'm using jquery syntax above, think question framework agnostic, shouldn't matter answers)

i'd use class signify elements want attach behavior to. has semantic meaning, , aren't coupling html ids or locations javascript.

in event need specifics, minimum or maximum date on date picker, light sprinkling of data attributes think elegant way provide it. require more few data attributes probably, in reality, whole new kind of thing deserves own class, removing need data attributes. example, might have datepicker class, , find providing minimum date of today force future date selection. well, make 'futuredatepicker' class instead.