JSFiddle - React, Tailwind, and code Playground

by gregborbonus

HTML

<form id="PlayerInfo">
  <table>
   <tr class = "PlayerRow">
    <td><input class="teamInput" type="text" placeholder="Player Full Name" /></td>
    <td><input class="teamInput" type="text" placeholder="Player Number" /></td>
    <td>   <input class="teamInput" type="text" placeholder="Jersey Size" /></td>
    <td>    <input class="teamInput" type="text" placeholder="Short Size" /></td>
    <td>  <input class="teamInput" type="text" placeholder="Male/Female" /></td>
   </tr>
  </table>
 </form>
 <select class="RosterCountSelect">
 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 </select>

JavaScript

$(".RosterCountSelect").change(function(){
   var numOfPlayers = this.value;
   c=$('.PlayerRow').length; //How many rows are already shown?
   for (var i = c; i < numOfPlayers; i++){ 
       $(".PlayerRow").first().clone().insertAfter(".PlayerRow:last"); //Cloning only after the LAST one, before it would clone for every row you had with the class PlayerRow. 
   }
});