JSFiddle - React, Tailwind, and code Playground

by princeofabyss

HTML

<form>
  <table>
    <tr>
      <td class="multiline">
        <label for="proficiency_level-a1">
          <input type="checkbox" name="proficiency_levels[]" id="proficiency_level-a1" value="a1">A1
        </label>
        <input type="text" name="scheduler_courses[]" id="scheduler_course-a1" value="" style="display: none;"><br>
        <label for="proficiency_level-a2">
          <input type="checkbox" name="proficiency_levels[]" id="proficiency_level-a2" value="a2">A2
        </label>
        <input type="text" name="scheduler_courses[]" id="scheduler_course-a2" value="" style="display: none;"><br>
        <label for="proficiency_level-b1">
          <input type="checkbox" name="proficiency_levels[]" id="proficiency_level-b1" value="b1">B1</label>
        <input type="text" name="scheduler_courses[]" id="scheduler_course-b1" value="" style="display: none;"><br>
        <label for="proficiency_level-b2">
          <input type="checkbox" name="proficiency_levels[]" id="proficiency_level-b2" value="b2">B2
        </label>
        <input type="text" name="scheduler_courses[]" id="scheduler_course-b2" value="" style="display: none;"><br>
        <label for="proficiency_level-c1">
          <input type="checkbox" name="proficiency_levels[]" id="proficiency_level-c1" value="c1">C1
        </label>
        <input type="text" name="scheduler_courses[]" id="scheduler_course-c1" value="" style="display: none;">
      </td>
    </tr>
  </table>
</form>

JavaScript

jQuery(function($) {
    function toggle_levels(elem, focus = false) {
      if ($(elem).is(":checked")) {
        $(elem).parent().next().show();

        if (focus) {
          $(elem).parent().next().focus();
        }
      } else {
        $(elem).parent().next().val('').hide();
      }
    }

    $("[id^=proficiency_level-]").each(function() {
      $(this).on('change', function() {
        toggle_levels(this, true);
      });
    });

    $(document).ready(function() {
      $("[id^=proficiency_level-]").each(function() {
        toggle_levels(this);
      });
    });
  });