I have managed to find a way to get text of my slides by using each but how do I get it to display my can products not text?

I have found a way to display text on each of my empty slides. so far, so good. But at you can see in my codepen project, there’s a can displaying on the first slide. Instead of the text ‘Hello’ on each of my slides, how do I display a loop of cans on each slide?

https://codepen.io/Rosstopherrr/pen/GVRvxJ

I had it like this thinking it will show all cans in each slide but it doesn’t show any cans…

$('#products article').each(function() {
    $(this).append(initApp())
  });

what am I doing wrong?

$('#products article').each(function() {
    $(this).append('hello')
  });

so in the each.function(index) - I can add the index, and then in initApp(index) - I can add index. and then in the initApp function I can adjust so that bottle[index] gets selected and then added. But nothing seems to work?? What am I doing wrong? I know there is a bunch of ways I can do this.

Like could I skip the initApp() function and add all the code in the .each(function() { my code to append bottle})??