JSFiddle - React, Tailwind, and code Playground

by helgatheviking

HTML

<form>

  <fieldset>
    <legend>Did you understand the question?</legend>
    <ul class='gfield_radio' id='input_4_4'>
      <li class='gchoice_4_4_0'>
        <input name='input_4' type='radio' value='First option' id='choice_4_4_0' tabindex='14' />
        <label for='choice_4_4_0' id='label_4_4_0'>
                First option</label>
      </li>
      <li class='gchoice_4_4_1'>
        <input name='input_4' type='radio' value='Second option' id='choice_4_4_1' tabindex='15' />
        <label for='choice_4_4_1' id='label_4_4_1'>
                Second option</label>
      </li>
      <li class='gchoice_4_4_2'>
        <input name='input_4' type='radio' value='Third option' id='choice_4_4_2' tabindex='16' />
        <label for='choice_4_4_2' id='label_4_4_2'>
                Third option</label>
      </li>
      <li class='gchoice_4_4_3'>
        <!-- no more tabindex -->
        <input name='input_4' type='radio' value='gf_other_choice' id='choice_4_4_3' />
        <!-- new label -->
        <label for='choice_4_4_3'>Other</label>
        <!-- no more tabindex -->
        <input id='input_4_4_other' name='input_4_other' type='text' value='' placeholder='Enter other value' aria-label='Other' />
      </li>
    </ul>
  </fieldset>
</form>

CSS

fieldset {
  border: 0;
}

legend {
  font-weight: bold;
}

.gfield_radio {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gfield_radio li input[type="text"] {
  display: none;
}

.gfield_radio li input:checked+label+input[type="text"] {
  display: block;
}

input[type="text"]:focus,
input[type="text"]:active {
  border: 2px solid blue;
  background: lightblue;
}

JavaScript

jQuery('#choice_4_4_3').on('focus click', function() {
  jQuery(this).nextAll('input').first().focus();
});

jQuery('#input_4_4_other').on('focus', function() {
  jQuery(this).prevAll("input").first().click();
});