活动按钮在每个部门中始终处于活动状态

Question

这是我的示例表单HTML代码。此外，我需要单击每个部分中的按钮时，该按钮保持活动状态，并显示红色背景。另一方面，无效按钮会更改灰色背景颜色。例如，当我们单击“打印箔厚度”标签按钮3时，它将激活 按钮3并保持4,5,6,7,8，“最适合”按钮被禁用。

<form id="msform">  
  <fieldset>
    <div class="form-card">
      <label class="label-order">Order Set Required:</label>
      <div class="btn-group" role="group" aria-label="Kit">
        <button type="button" class="btn btn-secondary">Replacement Set</button>
        <button type="button" class="btn btn-secondary">Complete Set</button>
      </div>
      <label class="label-order">Print Foil Thickness:</label>
      <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
        <div class="btn-group mr-2" role="group" aria-label="First group">
          <button type="button" class="btn btn-secondary">3</button>
          <button type="button" class="btn btn-secondary">4</button>
          <button type="button" class="btn btn-secondary">5</button>
          <button type="button" class="btn btn-secondary">6</button>
          <button type="button" class="btn btn-secondary">7</button>
          <button type="button" class="btn btn-secondary">8</button>
          <button type="button" class="btn btn-secondary">Best Fit</button>
        </div>
      </div>
      <label class="label-order">Print Foil Opening (in mils):</label>
      <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
        <div class="btn-group mr-2" role="group" aria-label="First group">
          <button type="button" class="btn btn-secondary">3</button>
          <button type="button" class="btn btn-secondary">4</button>
          <button type="button" class="btn btn-secondary">5</button>
          <button type="button" class="btn btn-secondary">6</button>
          <button type="button" class="btn btn-secondary">7</button>
          <button type="button" class="btn btn-secondary">8</button>
          <button type="button" class="btn btn-secondary">Best Fit</button>
        </div>
      </div>
      <label class="label-order">Sphere Diameter To Be Used (in mils):</label>
      <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
        <div class="btn-group mr-2" role="group" aria-label="First group">
          <button type="button" class="btn btn-secondary">3</button>
          <button type="button" class="btn btn-secondary">4</button>
          <button type="button" class="btn btn-secondary">5</button>
          <button type="button" class="btn btn-secondary">6</button>
          <button type="button" class="btn btn-secondary">7</button>
          <button type="button" class="btn btn-secondary">8</button>
          <button type="button" class="btn btn-secondary">Best Fit</button>
        </div>
      </div>
    </div>
  </fieldset>
</form>