HandleBar.js example demo page https://stnc.github.io/handleBar/

HandleBar_mini.html

         <div id="singleItems" class="d-lfex justify-content-center flex-column">
          <script id="singleItemsTpl" type="text/x-handlebars-template">
            <div class="name_container">
              <div class="name-">{{data.first_name}} {{data.last_name}} </div>
            </div>
            <div class="address"><strong>Mail:</strong> {{data.email}} </div>

            web site 
            <hr>
            <div class="address">{{support.url}} </div>
<hr>
INFO
            <div class="address"> {{support.text}} </div>


          </script>
    
        </div>
        
        
 
 
       <script id="multipleItemsTpl" type="text/x-handlebars-template">
        {{#each data}}

        <div class="row">
          <div class="col-md-6">
            <div class="profile_pic6">
              <img src="{{avatar}}">
            </div>
          </div>  

          <div class="col-md-6">
            <div class="pb-3 mb-0 small lh-sm border-bottom w-100">
              <div class="d-flex justify-content-between">
                <strong class="text-gray-dark">{{first_name}} {{last_name}}</strong>
              </div>

              <span class="d-block"><strong>Mail:</strong> {{email}} </span>

            </div>
          </div>
        </div>
  
       {{/each}}
<strong>Info</strong>
<p>{{support.text}}</p>

    </script>
      <div id="multipleItems"></div>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js"></script>


<script type="text/javascript">


SingleDataCall()
MultipleDataCall()


function SingleDataCall() {
    fetch("https://reqres.in/api/users/1", //user.json
    {
        method: 'GET',
        headers: {'X-Requested-With': 'XMLHttpRequest'}
        })
        .then(response => {
        if( response.ok ) {
            return response.json()
        } else {
        console.log("error")
        }
        })
        .then(data => {
      
            console.log(data)
    
            let cartSelectTemplate = jQuery('#singleItemsTpl').html();
            let TemplateCompileCartSelect = Handlebars.compile(cartSelectTemplate);
            let CompiledHtmlCartSelect = TemplateCompileCartSelect(data);
            jQuery('#singleItems').html(CompiledHtmlCartSelect);
      
        })
        .catch((error) => {
            console.log("error")
        });
}


function MultipleDataCall() {
  ///fetch("http://jsonplaceholder.typicode.com/users", //users.json
  fetch("https://reqres.in/api/users", //users.json
  {
      method: 'GET',
      headers: {'X-Requested-With': 'XMLHttpRequest'}
      })
      .then(response => {
      if( response.ok ) {
          return response.json()
      } else {
      console.log("error")
      }
      })
      .then(data => {
    
          console.log(data)
  
          let cartSelectTemplate = jQuery('#multipleItemsTpl').html();
          let TemplateCompileCartSelect = Handlebars.compile(cartSelectTemplate);
          let CompiledHtmlCartSelect = TemplateCompileCartSelect(data);
          jQuery('#multipleItems').html(CompiledHtmlCartSelect);
    
      })
      .catch((error) => {
          console.log("error")
      });
}

</script>

raw.json

{
  "data": {
    "id": 1,
    "email": "george.bluth@reqres.in",
    "first_name": "George",
    "last_name": "Bluth",
    "avatar": "https://reqres.in/img/faces/1-image.jpg"
  },
  "support": {
    "url": "https://contentcaddy.io?utm_source=reqres&utm_medium=json&utm_campaign=referral",
    "text": "Tired of writing endless social media content? Let Content Caddy generate it for you."
  }
}