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

Question

実現したい事

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

上記のようなboxを12個作ります。

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

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

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

該当のソースコード

<% 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 %>

.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;
  }
}

なぜこうなっているのか現在原因を究明している所です。
詳しい方ございましたら、アドバイスまた参考サイトをご教授頂けますと幸いです。

補足情報（FW/ツールのバージョンなど）

・npm -v 6.9.0
・node -v 12.6.0
・webpack -v 5.65.0
・ yarn -v 1.22.17

Answer 1

予想だけどforEachは全部いらないんじゃない？
外側で1から12までインデックスで回してるんなら
mainName[i]とかで取得するべきなんじゃ？

for (var i = 0; i < 12; i++) {
  mainName.forEach(function (value) {
    mainIcon.forEach(function (value) {})
    mainTitle.forEach(function (value) {})
 })
}

こんな風に書いていたら「mainNameの要素１２個？すべてに対する処理をさらに１２回やる」ことになるよ
mainIconとかはさらにその下にあるから１２×１２×１２回くらい回しています。

最終的に使わなくなりそうだけど変数名valueは名前かぶってるので
思っている内容が取れなくなってると思います。value1,value2,value3とかにするか
name,icon,titleとか分かりやすい変数名にしましょ

Answer 2

ご回答ありがとうございます。

<% 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">
                <div class="p-menuBox__name"><img src="../assets/images/mainmenu/menu/spr_top01_<%= mainName[i] %>.png"></div>
                <div class="p-menuBox__inner">
                  <div class="p-menuBox__icon"><img src="../assets/images/mainmenu/icon/spr_top01_<%= mainIcon[i] %>.png"></div>
                  <div class="p-menuBox__title"><img src="../assets/images/mainmenu/menu2/spr_top01_<%= mainTitle[i] %>.png"></div>
                  <div class="p-menuBox__text">
                    <p><%= mainText[i] %></p>
                  </div>
                </div>
              </div><% } %>
            </div>
          </div>



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

上記のように設定した所上手く行きました。
ご教授ありがとうございました！！