EJSでforを使って効率化したい

実現したい事

現在、ejsを使用しながらHPを作成しております。
似たようなコンテンツが多いのでforEachを使ってまとめて書きたいと考えました。
しかし、上手く行かずハマっているので、是非ご教授頂きたいです。
ちなみに完成形のイメージとしてはこちらです。↓

イメージ説明
上記のようなboxを12個作ります。

発生している問題・エラーメッセージ

現状はこんな感じになっています。↓

イメージ説明
一つのboxで各画像を12回繰り返している感じになっています。

該当のソースコード

index.ejs
<% var title= "TOP"; var description = "トップのdescription"; %>
<% var mainName = ['01','04','06','08','10','12','14','14','14','14','14','14']; %>
<% var mainIcon = ['46','48','50','52','54','56','58','60','62','63','65','66']; %>
<% var mainTitle = ['16','19','21','23','26','28','31','33','35','37','40','43']; %>

<% include src/ejs/template/_head %>
        <div class="l-main">
            <% include src/ejs/template/_sidebar %>
            <div class="l-main__menu">
              <% for (var i = 0; i < 12; i++) { %>
                <div class="p-menuBox">
              <% mainName.forEach(function (value) { %>
                <div class="p-menuBox__name"><img src="../assets/images/mainmenu/menu/spr_top01_<%= value %>.png"></div>
                <% }); %>
                <div class="p-menuBox__inner">
                  <% mainIcon.forEach(function (value) { %>
                  <div class="p-menuBox__icon"><img src="../assets/images/mainmenu/icon/spr_top01_<%= value %>.png"></div>
                  <% }); %>
                  <% mainTitle.forEach(function (value) { %>
                  <div class="p-menuBox__title"><img src="../assets/images/mainmenu/menu2/spr_top01_<%= value %>.png"></div>
                  <% }); %>
                  <div class="p-menuBox__text">
                    <p>グッピーズは、人材採用をITで革新し続ける企業です。</p>
                  </div>
                </div>
              </div><% } %>

          </div>



<% include src/ejs/template/_footer %>

_menuBox.scss
.p-menuBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  height: 230px;
  width: 230px;
  border: solid 1px #cc9933;

  &:nth-of-type(n + 4) {
    margin-top: 10px;
  }

  &:hover {
    background-color: #bbb;
  }

  #{&}__name {
    display: inline-block;
    width: 100%;
    height: 15px;
    margin-top: 10px;
  }

  #{&}__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 200px;
  }

  #{&}__icon {
    width: 80px;
    height: 80px;
  }

  #{&}__title {
    margin-top: 10px;
    width: 100%;
    height: 20px;
  }

  #{&}__text {
    margin-top: 10px;
    font-size: 5px;
    font-size: 0.5rem;
  }
}