title: How to show different span based on radio button selection?
body: <p>I am trying to display a specific span message based on a radio button selection. In addition, I want to lock the selection as soon as the user made the choice. So in other words:</p>
  
  <p><img src="https://i.stack.imgur.com/MoF0k.jpg" alt="enter image description here"></p>
  
  <p>I was able to almost achieve this effect that I'm trying to create:
  <a href="http://jsfiddle.net/baumdexterous/HkFXs/1/" rel="nofollow noreferrer">http://jsfiddle.net/baumdexterous/HkFXs/1/</a></p>
  
  <p>But I'm not sure how to make the incorrect part display upon selection for an incorrect option. I'm still a beginner programmer and not sure how to make it work. Please see my JS and HTML below. Would appreciate insight on how to make this work! </p>
  
  <p>HTML
          </p>
  
  <pre><code>      &lt;div id="wizard"&gt;
  
  
  
          &lt;div id="space" style="width:810px; background:white; height:10px;"&gt;
          &lt;/div&gt;
  
          &lt;div class="items"&gt;
  
              &lt;!-- Question 1 --&gt;
              &lt;div class="page one"&gt;
                  &lt;h2&gt;&lt;strong&gt;Question 1:&lt;/strong&gt;&lt;/h2&gt;
                  &lt;ul&gt;
                      &lt;li class="required double"&gt;
                          &lt;label&gt;
                              &lt;div class="qselections required"&gt;
                                  &lt;input type="radio" value="a" name="question1"&gt;a) New York
                                  &lt;div id="questiononea"&gt;&lt;/div&gt;
                                  &lt;br&gt;
                                  &lt;input type="radio" value="b" name="question1"&gt;b) Washington DC
                                  &lt;br&gt;
                                  &lt;input type="radio" value="c" name="question1"&gt;c) Seattle
                                  &lt;br&gt;
                                  &lt;input type="radio" value="d" name="question1"&gt;d) Portland
                                  &lt;br&gt;
                              &lt;/div&gt;
                          &lt;/label&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;li class="clearfix"&gt;
                      &lt;button type="button" class="next right"&gt;Proceed »&lt;/button&gt;
                  &lt;/li&gt;
              &lt;/div&gt;
  
            &lt;/div&gt;
  
          &lt;/div&gt;&lt;!--items--&gt;
  
        &lt;/div&gt;&lt;!--wizard--&gt;
  
      &lt;/form&gt;
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>    $(function () {
  
  
  
        var root = $("#wizard").scrollable();
        var isRadioCheck = false;
        // some variables that we need
        var api = root.scrollable(),
            drawer = $("#drawer");
  
  
            // prevent the user from making another selection once one radio option has been selected
          $('input[type=radio]').click(function(){ $('input[type=radio]').prop('disabled',true); });
  
            // Show user correct answer
          var appended = " &lt;span id='qselectionsCORRECT' style='font-size:16px; line-height:16px;'&gt;Correct&lt;/span&gt;";
          appended.id = 'appended';
  
          $('input:radio[name="question1"]').change(
              function(){
                  if ($(this).val() == 'a') {
                      $(appended).appendTo('#questiononea');
                  }
                  else {
                      $(appended).remove();
                  }
              });
  
        // validation logic is done inside the onBeforeSeek callback
        api.onBeforeSeek(function (event, i) {
  
            // we are going 1 step backwards so no need for validation
            if (api.getIndex() &lt; i || $('input[type=radio]').is(':checked')) {
  
                // 1. get current page
                var page = root.find(".page,.qselections").eq(api.getIndex()),
  
                    // 2. .. and all required fields inside the page
                    inputs = page.find(".required :input").removeClass("error"),
  
                    // 3. .. which are empty
                    empty = inputs.filter(function () {
                        isRadioCheck = $('input[type=radio]').is(':checked');
                        return $(this).val().replace(/\s*/g, '') == '';
                    });
  
  
  
                //ealert('Empty Value is bool : ' + empty.length + isRadioCheck);
                if (isRadioCheck) {
                    $('.qselections').removeClass("error");
                    //alert('removed');
                }
                // if there are empty fields, then
                if (empty.length || !isRadioCheck) {
  
                    // slide down the drawer
                    drawer.slideDown(function () {
  
                        // colored flash effect
                        drawer.css("backgroundColor", "#fff");
                        setTimeout(function () {
                            drawer.css("backgroundColor", "#fff");
                        }, 1000);
                    });
  
                    // add a CSS class name "error" for empty &amp; required fields
                    empty.addClass("error");
                    if (!isRadioCheck) $('.qselections').addClass("error");
                    // cancel seeking of the scrollable by returning false
                    return false;
  
                    // everything is good
                } else {
  
                    // hide the drawer
                    drawer.slideUp();
                }
  
            }
  
            // update status bar
            $("#status li").removeClass("active").eq(i).addClass("active");
  
        });
  
        // if tab is pressed on the next button seek to next page
        root.find("button.next").keydown(function (e) {
            if (e.keyCode == 9) {
  
                // seeks to next tab by executing our validation routine
                api.next();
                e.preventDefault();
            }
        });
      });
  </code></pre>
  
  <p>But</p>