Modal with Steps with Jquery

Question

I’m trying to create a modal with steps... Below is the modal and script code in Jquery.

<div class="modal fade" tabindex="-1" role="dialog" id="category-modal" data-backdrop="static">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title center">Modal</h2>
      </div>
      <div id="body_steps" class="modal-body">
        <section class="question-title">
          <h4> </h4>
        </section>

        <section class="question">
          <h3> </h3>
          <p> </p>
        </section>

        <section class="question-options">
          <div class="custom-control custom-radio">
            <input type="radio" id="customRadio1" value="yes" name="answerRadio" class="custom-control-input">
            <label class="custom-control-label" for="customRadio1">Yes</label>
          </div>
          <div class="custom-control custom-radio">
            <input type="radio" id="customRadio2" value="no" name="answerRadio" class="custom-control-input">
            <label class="custom-control-label" for="customRadio2">No</label>
          </div>
        </section>
      </div>

      <div class="modal-footer">
        <!-- <button type="button" id="button-prev" class="btn btn-primary">Previous</button> -->
        <button type="button" id="button-next" class="btn btn-primary">Next</button>
        <button type="button" class="btn btn-primary hide">Save changes</button>
        <button type="button" class="btn btn-secondary hide" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Code using jQuery:

jQuery(document).ready(function($) {
  $('#category-modal').modal('show');

  function clean() {
    $('#button-next').prop("disabled", true);
    $('input[name=answerRadio]').attr('checked', false);
  }

  function init() {
    $('#button-next').prop("disabled", true);
    var social_rating = 0;
  }
  init();
  var qSocial = {
    'q1': 'Question1',
    'q2': 'Question2',
    'q3': 'Question3',
    'q4': 'Question4',
    'q5': 'Question5',
  };
  $each.(qSocial, function(key, value) {
    $('.question-title h4').append("Social");
    $('.question h3').append(value);
    if ($("input[type=radio][name=answerRadio]:checked")) {
      $('#button-next').prop("disabled", false);
      if ($("input[type=radio][name=answerRadio]:checked").val() == 'yes') {
        $('#button-next').click(function() {
          social_rating++;
          console.log(social_rating);
          clean();
        });
      } else {
        $('#button-next').click(function() {
          console.log(social_rating);
          clean();
        });
      }
    }
  });
})

The idea is, as you answer the questions, the modal is fed with the array of questions... but it’s not working.