Форма отображения нескольких результатов после радиовходов

Question

Я делаю опрос, который использует радио кнопки.Есть несколько разделов с различными вопросами внутри них.Проблема, с которой я сталкиваюсь, заключается в том, что каждый раз, когда пользователь выбирает радиокнопку для вопроса в разделе, он отображает результат каждый раз, когда он нажимает на ввод.

// object of responses for the final result in the section
let responses = {
  results: {
    1: "Scores of 0 to 2",
    3: "Scores of 3 to 5",
    6: "Scores of 6 to 8",
    9: "Scores of 9 or higher",
  }
};

$('input[type="radio"]').change(function() {
  // getting each section and questions id's
  let id = $(this).closest('.questions').attr('id').split('-'),
    sec = id[0],
    qu = id[1],
    total = 0;

  // console.log($('div.questions[id^="s2-q1"] input:checked').length);

  // gathering the totals from the radio inputs to put into that sections score
  $('div.questions[id^="' + sec + '-"] input:checked').each(function() {
    total += parseInt($(this).val());
  });
  $('#' + sec + '-total').text(total);
  console.log(total);


  // gathering and displaying results to div
  if (total <= 2) {
    $('#' + sec + '-detail').append(responses.results[1]);
  } else if (total <= 5) {
    $('#' + sec + '-detail').append(responses.results[3]);
  } else if (total <= 8) {
    $('#' + sec + '-detail').append(responses.results[6]);
  } else if (total >= 9) {
    $('#' + sec + '-detail').append(responses.results[9]);
  } else {
    console.log("Nothing to show here");
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section">
  <div class="row">
    <div class="col-7">
      <h2> example </h2>
      <br>
      <div class="questions" id="s1-q1">
        <p class="mb-0">1. question one</p>
        <div class="form-check form-check-inline pt-2">
          <input class="form-check-input" type="radio" name="radio1-1" id="s1-q1-a1" value="3" checked>
          <label class="form-check-label" for="s1-q1">Almost Always</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="radio1-1" id="s1-q1-a2" value="2">
          <label class="form-check-label" for="s1-q2">Sometimes</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="radio1-1" id="s1-q1-a3" value="0">
          <label class="form-check-label" for="s1-q3">Never</label>
        </div>
      </div>
      <br>
      <br>

      <div class="questions" id="s1-q2">
        <p class="mb-0">2. question two.</p>
        <div class="form-check form-check-inline pt-2">
          <input class="form-check-input" type="radio" name="radio1-2" id="s1-q2-a1" value="3">
          <label class="form-check-label" for="s1-q1">Almost Always</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="radio1-2" id="s1-q2-a2" value="2">
          <label class="form-check-label" for="s1-q2">Sometimes</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="radio1-2" id="s1-q2-a3" value="0">
          <label class="form-check-label" for="s1-q3">Never</label>
        </div>
      </div>
      <div class="col">
        <p id="score">Section 1 Final Score</p>

        <div class="card" style="width: 3.7rem;">
          <div id="s1-total" class="card-body">
            00
          </div>
        </div>
        <br>

        <div class="card details" id="detail" style="width: 27rem;">
          <div class="card-body">
            <p class="card-text" id="s1-detail"></p>
          </div>
        </div>
      </div>
    </div>
  </div>

Цель состоит в том, чтобы сложить все итоги в разделе (который эта функция работает) и отобразить конечный результат, который соответствует правильному баллу.Любая помощь будет оценена.Спасибо!