Foreach loop not displaying content properly - node.js

Question

I am using node.js and its framework express to create a movie image gallery. A foreach loop is used to display data onto the page. The image gallery should display 4 images across in each row. For some apparent reason, the layout grid is broken and images are being duplicated when displayed on page. How can I create a grid layout for my image gallery with no duplicated data?
index.ejs
<!-- Photo Grid -->
<div class="row-image">
<% movies.forEach(function(movies) { %>
<div class="column">
<img src="<%= movies.image %>" style="width:100%">
<div class="desc">
<%= movies.name %>
</div>
</div>
<div class="column">
<img src="<%= movies.image %>" style="width:100%">
<div class="desc"><%= movies.name %></div>
</div>
</div>
<% } ); %>
main.css
* {
box-sizing: border-box;
}
.row-image {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
padding: 0 14px;
}
/* Create four equal columns that sits next to each other */
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 25%;
padding: 0 4px 20px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
border-radius: 9px;
}
.desc a:hover {
text-decoration: none;
color: #b3b3b3;
}
/* Responsive layout - makes a two column-layout instead of four columns */
#media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 50%;
}
}