JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="card">
    <h3 class="card-header" style="text-align: center;">OnPoint Team Generator</h3>
    <div class="card-block">
      <h4 class="card-title">Step 1: Number of Teams</h4>
      <p class="card-text">How many students do you have in your class?</p>
      <form id="teamForm">
        <div class="form-group">
          <input type="text" class="form-control" id="numberOfStudents" aria-describedby="numberStudents" placeholder="Enter Number of Students">
        </div>
        <button type="submit" class="btn btn-primary" id="submitTeams">Submit</button>
      </form>
    </div>
  </div>
  <div class="card">
    <div class="card-block" id="studentNumberResponse">
    </div>
  </div>
  <div id="secondsStep" class="card">
  </div>
  <div class="card">
    <div class="card-block" id="studentListResponse">
    </div>
  </div>
  <script src="app.js"></script>

CSS

* {
  box-sizing: border-box;
}

#studentNumberResponse,
#secondsStep,
#studentListResponse {
  display: none;
}

JavaScript

var numberOfStudents;
$("#teamForm").submit(function(event) {
  event.preventDefault();
  numberOfStudents = parseInt($("#numberOfStudents").val());
  let responseHTML = '<p class="responseText">';
  if (numberOfStudents % 4 === 0) {
    responseHTML += 'You will have ' + numberOfStudents / 4 + ' teams of 4 in your class.';
  } else if (numberOfStudents % 4 === 1) {
    responseHTML += 'You will have ' + (numberOfStudents - 1) / 4 + ' teams of 4 in your class and one team of 5.'
  } else if (numberOfStudents % 4 === 2) {
    responseHTML += 'You will have ' + (numberOfStudents - 6) / 4 + ' teams of 4 in your class and two teams of 3.'
  } else {
    responseHTML += 'You will have ' + (numberOfStudents - 3) / 4 + ' teams of 4 in your class and one team of 3.'
  }
  responseHTML += '</p>'

  $('#studentNumberResponse').css('display', 'block').html(responseHTML);
  $('#numberOfStudents').val('');
}).submit(function(event) {
  event.preventDefault();
  //const numberOfStudents = $("#numberOfStudents").val();
  let responseHTMLSecond = '<div class="card-block"> <h4 class="card-title">Step 2: Enter Your Students</h4> <p class="card-text">Add your students to create each individual team.</p> <form id="studentsForm">';
  let studentList = '<div class="form-group"> <input type="text" class="form-control" id="studentFirstName" aria-describedby="studentFirstName" placeholder="First Name"> </div> <div class="form-group"> <input type="text" class="form-control" id="studentLastName" aria-describedby="studentLastName" placeholder="Last Name"> </div> <div class="form-group"> <label for="exampleSelect1">Select Student Level</label> <select class="form-control" id="exampleSelect1"> <option>High</option> <option>Mid-High</option> <option>Mid-Low</option> <option>Low</option> </select> </div>';
  for(let i = 0; i < numberOfStudents; i +=1) {
responseHTMLSecond += studentList;
  }
  responseHTMLSecond += '<button type="submit" class="btn btn-primary"...