Bootstrap variable in the HTML and script part

Question

I am sending data read from a database with res.render('default/index', {posts: posts}); to a handlebars template.

This code will display images correctly:

{{#each posts}}
    <div class="col">
        <img src="data:image/png;base64,{{imagefile}}">
     </div>
{{/each}}

Now I want to display the images in a carousel. For this I need a script in addition to the html part.

How do I use the posts values in the script?

<script>
.......
$('<div class="item"><img src="????????????"><div class="carousel-caption"></div>   </div>').appendTo('.carousel-inner');
......
</script>

Thank you in advance for a hint.

Answer 1

Thank you Emiel very much for your help. Now I output the images in handlebars. Within the script, only the indicators are created and the active attributes are assigned. The variable "posts" is only used to determine the number of images for a counter. Not very elegant, but it works:

var j=0;

{{#each posts}} 
j++ 
{{/each}}

j is equal to the number of pictures.