Based on the following snippet HTML<table id=example class=display cellspacing=0 width=100%><thead><tr>  <th>Name</th>  <th>Position</th>  <th>Office</th>  <th>Age</th>  <th>Start date</th>  <th>Salary</th></tr>Javascriptvar tableNames = { example: #example };function main() {    $(tableNames[example]).DataTable();}$(document).ready(main()); I just want to know which are some consistent ways to keep track of variable names in both HTML and JS.Let's say that tomorrow I just rename example to foobar. Then the dataTables instance is not going to work as it works now. How may I manage that coupling between the variable name in the HTML code and the variable name in the javascript code? I thought about the tableNames object, but I'm wondering if a more structured approach existsThanks
Javascript and HTML decoupling
javascript;html