JSFiddle - React, Tailwind, and code Playground

by sushanth009

HTML

<p>
   <label><strong>No of Candidates</strong></label>
   <label><input name="cand_no" type="text" placeholder="Type Your Number of Candidates"  /></label>
<div class="clear"></div>
</p>
<div class="cand_fields">
   <table id="studentTable" width="630" border="0">
      <tr>
         <td>Name</td>
         <td width="20">Sex</td>
         <td>Email</td>
         <td>Phone</td>
         <td width="40">Position</td>
      </tr>
      <tr>
         <td><input name="cand_name" type="text" placeholder="Name" required="required" /></td>
         <td>
            <select name="cand_sex" required="required">
               <option value=" "> </option>
               <option value="Male">Male</option>
               <option value="Female">Female</option>
            </select>
         </td>
         <td><input name="cand_email" type="text" placeholder="Email" required="required" /></td>
         <td><input name="cand_phone" type="text" placeholder="Phone" required="required" /></td>
         <td><input name="cand_pos" type="text" placeholder="Position" required="required" /></td>
      </tr>
   </table>
</div>

<div class="template" style="display: none">
    <table>
    <tr >
         <td><input name="cand_name" type="text" placeholder="Name" required="required" /></td>
         <td>
            <select name="cand_sex" required="required">
               <option value=" "> </option>
               <option value="Male">Male</option>
               <option value="Female">Female</option>
            </select>
         </td>
         <td><input name="cand_email" type="text" placeholder="Email" required="required" /></td>
         <td><input name="cand_phone" type="text" placeholder="Phone" required="required" /></td>
         <td><input name="cand_pos" type="text" placeholder="Position" required="required" /></td>
      </tr>
  </table>
</div>

JavaScript

$('[name="cand_no"]').on('change', function() {
    // Not checking for Invalid input
    if (this.value != '') {
        var val = parseInt(this.value, 10);
        
        for (var i = 0; i < val; i++) {
            // Clone the Template
            var $cloned = $('.template tbody').clone();
            // For each Candidate append the template row
            $('#studentTable tbody').append($cloned.html());
        }
    }
});