Estoy usando Handlebars.js para representar dos plantillas, ambas completamente idénticas con una ID diferente. El primer renderizado no es funcional (no hay lista renderizada) pero el segundo renderiza perfectamente. ¿Qué podría explicar esto? HTML:

 <div class="input-group mb-3"> <div class="input-group-prepend"> <label class="input-group-text" for="inputGroupSelect01">Src</label> </div> <select class="custom-select" id="inputGroupSelect01" onChange="takeSelectedSourceValue(this);"> <option id="source-language" value="" selected disabled>Auto</option> </select> <script type="text/handlebar-template" id="selectPersonTemplate"> {{#each people}} <option value="{{valueLang}}">{{htmlLang}}</option> {{/each}} </script> </select> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <label class="input-group-text" for="inputGroupSelect01">Src</label> </div> <select class="custom-select" id="inputGroupSelect02" onChange="takeSelectedSourceValue(this);"> <option id="source-language" value="" selected disabled>Auto</option> </select> <script type="text/handlebar-template" id="selectPersonTemplate"> {{#each people}} <option value="{{valueLang}}">{{htmlLang}}</option> {{/each}} </script> </select> </div>

JS:

 $(function () { var people = [ { valueLang: 'DE', htmlLang: 'DE' }, { valueLang: 'FR', htmlLang: 'FR' }, { valueLang: 'IT', htmlLang: 'IT' }, { valueLang: 'ES', htmlLang: 'ES' }, { valueLang: 'SV', htmlLang: 'SV' }, { valueLang: 'DA', htmlLang: 'DA' } ]; var templateText = $("#selectPersonTemplate").html(); var selectPersonTemplate = Handlebars.compile(templateText); var html = selectPersonTemplate({ people: people }); $("#inputGroupSelect01").html(html); $("#inputGroupSelect02").html(html); });