JSFiddle - React, Tailwind, and code Playground

by theumer

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
      <form method="POST">
          <li>
            <p>GameType:
              <select id="gametype" name="gametype">
                <option value="single">Singles</option>
                <option value="doubles">Double</option>
                <option value="cutthroat">Cut Throat</option>
              </select>
          </p>
        </li>
        <li>
          <div id="player1">
              <p>player one:
                  <input type="text" name="player_one" placeholder="ldap" />
              </p>
          </div>
        </li>
        <li>
          <div id="player2">
              <p>player two:
                  <input type="text" name="player_two" placeholder="ldap" />
              </p>
          </div>
        </li>
        <li>
          <div id="player3">
              <p>player three:
                  <input type="text" name="player_three" placeholder="ldap" />
              </p>
          </div>
        </li>     
          <div id="player4">
              <p>player four:
                  <input type="text" name="player_four" placeholder="ldap" />
              </p>
          </div>
        <p align="center">
              <input type="submit" value="submit!" />
          </p>
      </form>

JavaScript

$(document).ready(function () {
   toggleFields();
   $("#gametype").change(function () {
       toggleFields();
   });
});

function toggleFields() {
   if ($("#gametype").val() != "cutthroat") {
       $(".player1").show();
       $(".player2").show();
       $(".player3").show();
       $(".player4").hide();
   } else if ($("#gametype").val() == "doubles") {
       $(".player1").show();
       $(".player2").show();
       $(".player3").show();
       $(".player4").show();
   } else if ($("#gametype").val() == "singles") {
       $(".player1").show();
       $(".player2").show();
       $(".player3").hide();
       $(".player4").hide();
   } else {
       $(".player1").hide();
       $(".player2").hide();
       $(".player3").hide();
       $(".player4").hide();
   }
   
}