Component in a loop does not show the last component in ember js

I'm a beginner to ember js. Here I'm looping a component called colored-box in the 'reading.hbs' file. This loop of components shows all the other elements with relevant properties. But the last element is not showing. In the component js file, I have used observes method with init. I'm downloading a pdf which is generated using the html rendered with this code with pdfReadctor. I got this issue in the downloaded pdf. I have attached the image of the place where I have the issue. I can't figure out what the reason is. Can anyone please help me to figure out the problem? Below I have attached the code.

Figure 1.) reading.hbs

Figure 2.) colored-box.hbs - component file

Figure 3.) colored-box.js