如何从多页单选表单生成推荐产品组合？

我做了一个5页的表单，每页都是单选输入框，每页只能选一项，所有字段都是必填项。大部分选项会关联一款产品，有些选项关联的是同一款产品，需要在确认页展示推荐的关联产品（最少1个，最多5个）。

简化选项-产品对应表 #

第1页 #

第2页 #

后续页面以此类推。

我参考了其他帖子的jQuery代码并修改，用来关联选项ID，代码如下：

$('input[type=radio]').on("change", buttonChanged);

function buttonChanged() {
  if ($("#7_1").is(':checked') && $("#14_12").is(':checked') && $("#12_12").is(':checked') && $("#10_12").is(':checked') && $("#22_12").is(':checked')) {
    $(".test-display1").show();
  } else if ($("#7_2").is(':checked') && $("#14_13").is(':checked') && $("#12_13").is(':checked') && $("#10_13").is(':checked') && $("#22_13").is(':checked')) {
    $(".test-display2").show();
  }
}

这段代码能正常运行，也能正确展示对应的确认区块，但硬编码所有可能的组合太繁琐了，想找个更简便的实现方式，jQuery或者原生JavaScript都可以。

下面是部分表单HTML代码（还在开发中）：

<form>
  <!-- **第1页** -->
  <div class="option-wrapper">
    <div class="ee_list_item_label">
      <span class="input"><input type="radio" name="7" id="7_1" value="1" required="required"></span>
      <label class="ee_editable ee_answertext" for="7_1">改善头发、皮肤和指甲状态</label>
    </div>
  </div>
  <div class="option-wrapper">
    <div class="ee_list_item_label">
      <span class="input"><input type="radio" name="7" id="7_2" value="2" required="required"></span>
      <label class="ee_editable ee_answertext" for="7_2"><span>骨骼与关节养护</span>
        </label>
    </div>
  </div>
  <div class="option-wrapper">
    <div class="ee_list_item_label">
      <span class="input"><input type="radio" name="7" id="7_3" value="3" required="required"></span>
      <label class="ee_editable ee_answertext" for="7_3"><span>健康活力提升</span>
        </label>
    </div>
  </div>
  <div class="option-wrapper">
    <div class="ee_list_item_label">
      <span class="input"><input type="radio" name="7" id="7_4" value="4" required="required"></span>
      <label class="ee_editable ee_answertext" for="7_4"><span>运动辅助</span>
        </label>
    </div>
  </div>
  <div class="option-wrapper">
    <div class="ee_list_item_label">
      <span class="input"><input type="radio" name="7" id="7_5" value="5" required="required"></span>
      <label class="ee_editable ee_answertext" for="7_5"><span>抗衰养护</span>
        </label>
    </div>
  </div>
  <div class="option-wrapper">
    <div class="ee_list_item_label">
      <span class="input"><input type="radio" name="7" id="7_8" value="8" required="required"></span>
      <label class="ee_editable ee_answertext" for="7_8"><span>综合健康养护</span>
        </label>
    </div>

    <hr />
    <!-- **第2页** -->
    <div class="ee_list_item_label">
      <span class="input"><input type="radio" name="14" id="14_12" value="12" required="required"></span>
      <label class="ee_editable ee_answertext" for="14_12"><span>每周5-7次、每次30分钟以上高强度运动</span>
        </label>
    </div>
  </div>
  <div class="option-wrapper">
    <div class="ee_list_item_label">
      <span class="input"><input type="radio" name="14" id="14_13" value="13" required="required"></span>
      <label class="ee_editable ee_answertext" for="14_13"><span>每日30分钟以上中等强度运动</span>
        </label>
    </div>
  </div>
  <div class="option-wrapper">
    <div class="ee_list_item_label">
      <span class="input"><input type="radio" name="14" id="14_14" value="14" required="required"></span>
      <label class="ee_editable ee_answertext" for="14_14"><span>每周3-4次、每次30分钟运动</span></label>
    </div>
  </div>
  <div class="option-wrapper">
    <div class="ee_list_item_label">
      <span class="input"><input type="radio" name="14" id="14_15" value="15" required="required"></span>
      <label class="ee_editable ee_answertext" for="14_15"><span>每日步行</span></label>
    </div>
  </div>
  <div class="option-wrapper">
    <div class="ee_list_item_label">
      <span class="input"><input type="radio" name="14" id="14_16" value="16" required="required"></span>
      <label class="ee_editable ee_answertext" for="14_16"><span>几乎不运动</span>
        </label>
    </div>
  </div>
</form>

内容的提问来源于stack exchange，提问作者Shantelle