diff --git a/app.js b/app.js
index 373211f..2673603 100644
--- a/app.js
+++ b/app.js
@@ -201,6 +201,27 @@ function renderControls() {
   $("#recommendationCount").value = state.recommendationCount;
 }
 
+function createEffectRow(effect, effectIndex, typeAttribute, valueAttribute, showInitialHint = true) {
+  const row = document.createElement("div");
+  row.className = "effect-row";
+  row.innerHTML = `
+    <label>Effect ${effectIndex + 1}
+      <select ${typeAttribute}="${effectIndex}">
+        <option value="">None</option>
+        ${EFFECTS.map((option) => `<option value="${option.id}">${option.label} (max ${option.cap}%)</option>`).join("")}
+      </select>
+    </label>
+    <label>Percent
+      <input ${valueAttribute}="${effectIndex}" type="number" min="1" step="0.1" value="${effect.value}" />
+      <span class="cap-hint"></span>
+    </label>`;
+  row.querySelector("select").value = effect.type;
+  if (showInitialHint) {
+    row.querySelector(".cap-hint").textContent = effect.type ? `Cap: ${effectById(effect.type).cap}%` : "Ignored";
+  }
+  return row;
+}
+
 function renderGear() {
   const grid = $("#gearGrid");
   const template = $("#gearTemplate");
@@ -244,23 +265,7 @@ function renderGear() {
       effects.innerHTML = '<p class="no-effects-note">Base stats only. No effects.</p>';
     } else {
       piece.effects.forEach((effect, effectIndex) => {
-        const row = document.createElement("div");
-        row.className = "effect-row";
-        row.innerHTML = `
-          <label>Effect ${effectIndex + 1}
-            <select data-effect-type="${effectIndex}">
-              <option value="">None</option>
-              ${EFFECTS.map((option) => `<option value="${option.id}">${option.label} (max ${option.cap}%)</option>`).join("")}
-            </select>
-          </label>
-          <label>Percent
-            <input data-effect-value="${effectIndex}" type="number" min="1" step="0.1" value="${effect.value}" />
-            <span class="cap-hint"></span>
-          </label>`;
-        row.querySelector("select").value = effect.type;
-        const hint = row.querySelector(".cap-hint");
-        hint.textContent = effect.type ? `Cap: ${effectById(effect.type).cap}%` : "Ignored";
-        effects.appendChild(row);
+        effects.appendChild(createEffectRow(effect, effectIndex, "data-effect-type", "data-effect-value"));
       });
     }
 
@@ -300,21 +305,7 @@ function renderNewItemComparison() {
   const effects = $("#newItemEffects");
   effects.innerHTML = "";
   state.newItem.effects.forEach((effect, effectIndex) => {
-    const row = document.createElement("div");
-    row.className = "effect-row";
-    row.innerHTML = `
-      <label>Effect ${effectIndex + 1}
-        <select data-new-item-effect-type="${effectIndex}">
-          <option value="">None</option>
-          ${EFFECTS.map((option) => `<option value="${option.id}">${option.label} (max ${option.cap}%)</option>`).join("")}
-        </select>
-      </label>
-      <label>Percent
-        <input data-new-item-effect-value="${effectIndex}" type="number" min="1" step="0.1" value="${effect.value}" />
-        <span class="cap-hint"></span>
-      </label>`;
-    row.querySelector("select").value = effect.type;
-    effects.appendChild(row);
+    effects.appendChild(createEffectRow(effect, effectIndex, "data-new-item-effect-type", "data-new-item-effect-value", false));
   });
 }