JSFiddle - React, Tailwind, and code Playground

by CR47

HTML

<div class="personalized-questions-wrapper">
  <div id="personalied-questions">
                        <div class="question-card-wrapper">
      <div id="lemongrab" class="question-card">
        <div class="pe-description-wrapper">
          <span class="pe-description">Please answer to help us better personalize your experience:</span><br>
        </div>
        <div class="pe-question-wrapper">
          <span class="pe-question">What is the condition of this castle?</span>
        </div>
        <form>
          <div class="answers-wrapper answer-type-radio">
                                    <div class="answer-wrapper">
                <div class="pe-answer pe-answer_0 pe-answer-radio">
                  <input type="radio" name="lemongrab" value="acceptable">Acceptable<br>
                </div>
              </div>
                          <div class="answer-wrapper">
                <div class="pe-answer pe-answer_1 pe-answer-radio">
                  <input type="radio" name="lemongrab" value="unacceptable">Unacceptable<br>
                </div>
              </div>
                                  <button class="answer-submit">Submit</button>
          </div>
        </form>
      </div>
    </div>
                        <div class="question-card-wrapper">
      <div id="qid123" class="question-card">
        <div class="pe-description-wrapper">
          <span class="pe-description">Please answer to help us better personalize your experience:</span><br>
        </div>
        <div class="pe-question-wrapper">
          <span class="pe-question">Is this question one?</span>
        </div>
        <form>
          <div class="answers-wrapper answer-type-checkbox">
                                    <div class="answer-wrapper">
                <div class="pe-answer pe-answer_0 pe-answer-checkbox">
                  <input type="checkbox" name="qid123" value="yes">Yes it is<br>
                </div>
              </div>
                         ...

CSS

#personalied-questions {
  height: 395px;
  width: 479px;
  text-align: center;
}
.question-card-wrapper {
  border: 1px solid #C5C5C5;
  height: 380px;
  margin-bottom: 15px;
  padding: 0 15px 15px 0;
}
.question-card:after, .question-card:before {
  bottom: -8px;
  content: '';
  display: block;
  height: 61px;
  position: absolute;
  right: -9px;
  width: 159px;
}
.answers-wrapper {
  display: block;
  margin: 0 auto;
}

JavaScript

$(".question-card-wrapper").each(function(i, obj) {
  // do something for each card
});
$(".answer-submit").click(function(e) {
  e.preventDefault();
  if ($(this).parent('.answers-wrapper').hasClass('answer-type-radio')) {
    if ($(this).parent().children().find('input:radio:checked').length > 0) {
      console.log('checked');
      $(this).parents('.question-card-wrapper').hide('fast');
    } else {
      chonsole.log('not checked');
    }
  } else if ($(this).parent('.answers-wrapper').hasClass('answer-type-checkbox')) {
    if ($(this).parent().children().find('input:checkbox:checked').length > 0) {
      console.log('at least one box is checked');
      $(this).parents('.question-card-wrapper').hide('fast');
    } else {
      console.log('none of these are checked');
    }
  } else if ($(this).parent('.answers-wrapper').hasClass('answer-type-select')) {
    if ($(this).parent().children().find('option:selected').length > 0) {
      var select_value = $(this).parent().children().find('option:selected').text();
      var default_values = ["----Choose Your Profession---", "---NoValue---"];
      if ($.inArray(select_value, default_values) > -1 ) {
        console.log('"' + select_value + '" is a default value, select another.');
      } else {
        console.log('goooood');
        $(this).parents('.question-card-wrapper').hide('fast');
      }
    }                                 
  }
});