diff --git a/app/javascript/components/ElapsedDays.jsx b/app/javascript/components/ElapsedDays.jsx
deleted file mode 100644
index 90138cc8e7f..00000000000
--- a/app/javascript/components/ElapsedDays.jsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import React from 'react'
-
-export default function ElapsedDays({
-  countProductsGroupedBy,
-  productDeadlineDay
-}) {
-  const activeClass = (quantity) => {
-    return quantity ? 'is-active' : 'is-inactive'
-  }
-
-  const renderElapsedDay = (elapsedDays, linkHref, linkText, alertText) => {
-    return (
-      <li
-        className={`page-nav__item is-reply-${linkText} border-b-0 ${activeClass(
-          countProductsGroupedBy(productDeadlineDay + elapsedDays)
-        )}`}>
-        <a className="page-nav__item-link" href={`#${linkHref}`}>
-          <span className="page-nav__item-link-inner">
-            {productDeadlineDay + elapsedDays}日{alertText}経過
-            {` (${countProductsGroupedBy(productDeadlineDay + elapsedDays)})`}
-          </span>
-        </a>
-      </li>
-    )
-  }
-
-  return (
-    <nav className="page-body__column is-sub">
-      <div className="page-nav a-card">
-        <ol className="page-nav__items elapsed-days">
-          {renderElapsedDay(
-            2,
-            `${productDeadlineDay + 2}days-elapsed`,
-            'deadline',
-            '以上'
-          )}
-          {renderElapsedDay(
-            1,
-            `${productDeadlineDay + 1}days-elapsed`,
-            'alert'
-          )}
-          {renderElapsedDay(0, `${productDeadlineDay}days-elapsed`, 'warning')}
-          {Array.from(
-            { length: productDeadlineDay - 1 },
-            (_, index) => index + 1
-          )
-            .reverse()
-            .map((passedDay) => (
-              <li
-                key={passedDay}
-                className={`page-nav__item ${activeClass(
-                  countProductsGroupedBy(passedDay)
-                )}`}>
-                <a
-                  href={`#${passedDay}days-elapsed`}
-                  className="page-nav__item-link">
-                  <span className="page-nav__item-link-inner">
-                    {passedDay}日経過
-                    {` (${countProductsGroupedBy(passedDay)})`}
-                  </span>
-                </a>
-              </li>
-            ))}
-          <li
-            className={`page-nav__item ${activeClass(
-              countProductsGroupedBy(0)
-            )}`}>
-            <a href="#0days-elapsed" className="page-nav__item-link">
-              <span className="page-nav__item-link-inner">
-                今日提出{` (${countProductsGroupedBy(0)})`}
-              </span>
-            </a>
-          </li>
-        </ol>
-      </div>
-    </nav>
-  )
-}
diff --git a/app/javascript/components/Products.jsx b/app/javascript/components/Products.jsx
index a1571006f71..d2bdee6d3ce 100644
--- a/app/javascript/components/Products.jsx
+++ b/app/javascript/components/Products.jsx
@@ -1,11 +1,11 @@
-import React from 'react'
+import React, { useRef, useEffect } from 'react'
 import useSWR from 'swr'
 import Pagination from './Pagination'
 import LoadingListPlaceholder from './LoadingListPlaceholder'
 import UnconfirmedLink from './UnconfirmedLink'
 import Product from './Product'
 import fetcher from '../fetcher'
-import ElapsedDays from './ElapsedDays'
+import elapsedDays from '../elapsed-days.js'
 import usePage from './hooks/usePage'
 
 export default function Products({
@@ -93,6 +93,19 @@ export default function Products({
     return `${elapsedDays}days-elapsed`
   }
 
+  const elapsedDaysRef = useRef(null)
+
+  useEffect(() => {
+    if (elapsedDaysRef.current) {
+      const elapsedDaysElement = elapsedDays({
+        countProductsGroupedBy,
+        productDeadlineDay
+      })
+      elapsedDaysRef.current.innerHTML = ''
+      elapsedDaysRef.current.appendChild(elapsedDaysElement)
+    }
+  }, [countProductsGroupedBy, productDeadlineDay])
+
   if (error) return <>エラーが発生しました。</>
 
   if (!data) {
@@ -225,10 +238,7 @@ export default function Products({
             <UnconfirmedLink label={unconfirmedLinksName()} />
           </div>
 
-          <ElapsedDays
-            countProductsGroupedBy={countProductsGroupedBy}
-            productDeadlineDay={productDeadlineDay}
-          />
+          <div className="page-body__column is-sub" ref={elapsedDaysRef}></div>
         </div>
       </div>
     )
diff --git a/app/javascript/elapsed-days.js b/app/javascript/elapsed-days.js
new file mode 100644
index 00000000000..12c86adcd9f
--- /dev/null
+++ b/app/javascript/elapsed-days.js
@@ -0,0 +1,94 @@
+export default function elapsedDays({
+  countProductsGroupedBy,
+  productDeadlineDay
+}) {
+  const activeClass = (quantity) => (quantity ? 'is-active' : 'is-inactive')
+
+  const createNavigationItem = ({
+    elapsedDays,
+    additionalClass = '',
+    todayProducts
+  }) => {
+    const li = createList(elapsedDays, additionalClass)
+    const a = createAnchor(elapsedDays)
+    const span = createSpan(elapsedDays, todayProducts)
+
+    a.appendChild(span)
+    li.appendChild(a)
+    return li
+  }
+
+  const createList = (elapsedDays, additionalClass) => {
+    const li = document.createElement('li')
+    li.className = `page-nav__item ${additionalClass} ${activeClass(
+      countProductsGroupedBy(elapsedDays)
+    )}`.trim()
+    return li
+  }
+
+  const createAnchor = (elapsedDays) => {
+    const a = document.createElement('a')
+    a.className = 'page-nav__item-link'
+    a.href = `#${elapsedDays}days-elapsed`
+    return a
+  }
+
+  const createSpan = (elapsedDays, todayProducts) => {
+    const span = document.createElement('span')
+    span.className = 'page-nav__item-link-inner'
+    span.textContent =
+      todayProducts ||
+      `${elapsedDays}日${
+        elapsedDays >= 6 ? '以上' : ''
+      }経過 (${countProductsGroupedBy(elapsedDays)})`
+    return span
+  }
+
+  const nav = document.createElement('nav')
+
+  const div = document.createElement('div')
+  div.className = 'page-nav a-card'
+
+  const ol = document.createElement('ol')
+  ol.className = 'page-nav__items elapsed-days'
+
+  ol.appendChild(
+    createNavigationItem({
+      elapsedDays: productDeadlineDay + 2,
+      additionalClass: 'is-reply-deadline border-b-0'
+    })
+  )
+  ol.appendChild(
+    createNavigationItem({
+      elapsedDays: productDeadlineDay + 1,
+      additionalClass: 'is-reply-alert border-b-0'
+    })
+  )
+  ol.appendChild(
+    createNavigationItem({
+      elapsedDays: productDeadlineDay,
+      additionalClass: 'is-reply-warning border-b-0'
+    })
+  )
+
+  Array.from({ length: productDeadlineDay - 1 }, (_, index) => index + 1)
+    .reverse()
+    .forEach((passedDay) =>
+      ol.appendChild(
+        createNavigationItem({
+          elapsedDays: passedDay
+        })
+      )
+    )
+
+  ol.appendChild(
+    createNavigationItem({
+      elapsedDays: 0,
+      todayProducts: `今日提出 (${countProductsGroupedBy(0)})`
+    })
+  )
+
+  div.appendChild(ol)
+  nav.appendChild(div)
+  return nav
+}