JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<section class='row' id='survey_page'>
  <div class='small-12 columns'>
    <h1 class='text-center'>Tell us how we’ve been doing</h1>
    <div class='small-12 medium-9 small-centered columns'>
      <form class="simple_form submit_form" novalidate="novalidate" id="edit_survey_4" action="/surveys/180dayssurvey" accept-charset="UTF-8" method="post">
        <input name="utf8" type="hidden" value="&#x2713;" />
        <input type="hidden" name="_method" value="patch" />
        <input type="hidden" name="authenticity_token" value="4Sb68V4KpF9zwSIuVAKv/7SiuIV+wDArsKHBzlS227TjhdCAkANpQ1iOe6ALtDuFa0VrUAFCrOLFrlGxemOohw==" />
        <div class="input string required survey_answers">
          <label class="string required" for="survey_answers">Email <i title="required">*</i></label>
          <input name="survey[answers][email]" value="" class="string required email_field" type="text" id="survey_answers" />
        </div>
        <div class="input radio_buttons optional survey_answers  parent_question">
          <label class="radio_buttons optional">1. Have you recently experienced any technical issues while using Kadince?</label>
          <div class="radio">
            <label for="survey_answers_yes">
              <input name="survey[answers][question18]" value="Yes" data-child-name="survey[answers][question19]" data-trigger-on="1" class="radio_buttons optional" type="radio" id="survey_answers_yes" />Yes</label>
          </div>
          <div class="radio">
            <label for="survey_answers_no">
              <input name="survey[answers][question18]" value="No" data-child-name="survey[answers][question19]" data-trigger-on="1" class="radio_buttons optional" type="radio" id="survey_answers_no" />No</label>
          </div>
        </div>
        <div class="input radio_buttons optional survey_answers  hidden parent_question">
          <label class="radio_buttons optional">2. Did you report the issue?</label>
          <div class="radio">
            <label...

CSS

body {
  background: #ffffff none repeat scroll 0 0;
  color: #535458;
  cursor: auto;
  font-family: "Open Sans", sans-serif;
  font-style: normal;
  font-weight: 300;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  position: relative;
}

.hidden,
.hide {
  display: none;
}

.invisible {
  visibility: hidden;
}

textarea {
  height: auto;
  min-height: 50px;
}

select {
  width: 100%;
}

JavaScript

$(function() {
  $('body').on('change', '.parent_question select, .parent_question input', function() {
    var current_input_name = $(this).prop('name');
    var current_input_id = parseInt(current_input_name.substring(24, 26));
    var last_input_name = $(".parent_question:last [name^='survey[answers]']").prop('name');
    var last_input_id = parseInt(last_input_name.substring(24, 26));
    console.log("Change " + current_input_name + "/" + last_input_name + ", " + current_input_id + "/" + last_input_id);
    var child_input = $('[name="' + $(this).data('child-name') + '"]');
    var child_question = child_input.closest('.survey_answers');
    var trigger_on = $(this).data('trigger-on');
    var show = $(this)[0].selectedIndex == undefined ? ($(this).closest('.survey_answers').find('input').index($(this)) + 1) == trigger_on : $(this)[0].selectedIndex == trigger_on;
    if (show) {
      child_question.show();
    } else {
      child_question.hide();
      child_input.val('');
      child_input.prop('checked', false);
    }
    for (var i = current_input_id + 2; i <= last_input_id; i++) {
      console.log("Clearing survey[answers][question" + i + "]");
      var nextElem = $("[name='survey[answers][question" + i + "]']");
      nextElem.parents("div.survey_answers").hide();
      nextElem.val('');
      nextElem.prop('checked', false);
    }
  });
});