Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

211
Views
Handlebars is failing to render identical templates

I'm using Handlebars.js to render two templates, both completely identical bar a different ID. The first render is not functional (No list rendered) but the second renders perfectly. What could explain this? 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);
});
  
about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!