replicate section of html dynamically

I have a section(div) in front end(html) that is getting loaded dynamically based upon no of entities in back end. So if there are 5 entities in backend, div will be repeated 5 times. But all this happening from javascript which does the repeation. So the current code look like:

var template = '<div>';
template += '<div class="row">';
template += '<div class="col-md-3">';
template += '<div class="col-md-3"></div>';

and so on. So we are repeating this template variable based upon no of entities in the backend. I know that this is a bad approach. template that we are trying to render from javascript has become extremly large and unreadable. its hard to make any changes and I am trying to make it mobile/table responsive and it is giving me nightmares.

I have just started with front end development and don't know much about the approaches I can take here. I know for certain that these kind of things can easily be solved using frontend frameworks like angularjs or emberjs but I am running short on time to learn these frameworks.

What can be the best approach using html/css/js/jquery/ajax that I can go for?