How to avoid duplicate element id when using template

help
1

When I insert a template into another template, both templates may contain html elements of the same id. But there will be no warnings or errors reported in the browser. This may lead to bugs when involving javascript to handle these elements. How could I solve this problem without paying particular attention to name the elements.

E.g.

<template name="A">
    {{> treatment1}}
    {{> treatment2}}
</template>

<template name="treatment1">
     <input id="age" type="number"...>
</template>

<template name="treatment2">
     <input id="age" type="number"...>
</template>

After template A rendered, there will be two elements of the same id “age”.

2

I believe the Template.events only look for elements that belong to the template, so if you have multiple templates with <input class="age"> and

Template.treatment.events({
  'input input.age'(){}
})

Then it will still work fine. And just don’t use ids unless you know they will be unique.

3

Thanks very much! Then, I assume that it is very hard to avoid this kind of id duplications and I should be very cautioned to use document.getElementbyId().