<script type="text-custom-template" id="hidden-template">
  <div class="box">
      <h3 id="box-name"></h3>
      <p id="box-text"></p>
      <img id="box-image" />
  </div>
</script>

<div id="target">Loading...</div>

.box{
 border: 1px solid #000; 
  padding:15px 0 0 15px;
  width: 135px;
  height:135px;
  margin-right:5px;
  display:inline-block;
  background-color:#ddd;
  color:#444;
  }
.box img{
width:50%;
  padding-left:20%;
  }

$(function() {
  var template = $('#hidden-template').html();
  
  var results =  [{boxName:"Dog",boxText:"Lorem Ipsum",boxImage:"https://darrenwelch.co.uk/images/dog.gif"},{boxName:"Cat",boxText:"dolor sit amet",boxImage:"https://darrenwelch.co.uk/images/cat.gif"},{boxName:"Mouse",boxText:"consectetur",boxImage:"https://darrenwelch.co.uk/images/mouse.gif"},{boxName:"Turtle",boxText:"adipiscing elit",boxImage:"https://darrenwelch.co.uk/images/turtle.gif"}];


//reset 
  $('#target').html("");

//load from json
  $.each(results, function (i, item) {
    var box = item; 
    
    var myTemplate = $(template).clone();
   
    $(myTemplate).find('#box-name').text(box.boxName);
    $(myTemplate).find('#box-text').text(box.boxText);
     $(myTemplate).find('#box-image').attr("src",box.boxImage);
    
    $('#target').append(myTemplate);
  });
});