JSFiddle - React, Tailwind, and code Playground

HTML

<table class="day-choices">
                                <thead>
                                    <tr>
                                        <th>Time</th>
                                        <th class="day-choices-pleft">Places Left</th>
                                        <th class="day-choices-preq">Places Req.</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td></td>
                                        <td class="day-choices-pleft"></td>
                                        <td class="day-choices-preq">
                                            <select name="places-req[]" class="places-req">
                                                <option value="">0</option>
<option value="1">1</option>
<option value="2">2</option> 
<option value="3">3</option> 
<option value="4">4</option> 
                                            </select>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>

<form action="/event/scripts/register.html" method="post">
    <div id="register"></div>
    <div class="submit-field">
        <input type="hidden" value="1" id="event" name="event" />
        <input type="submit" value="" />
    </div>
    <p>* Please note that we will not pass your details to a third party.</p>
</form>

JavaScript

var peopleDisplayed = 0;

 $('.places-req').change(function () {
     if (peopleDisplayed == 0) {
         peopleDisplayed = ($(this).val());
         numberPeople = ($(this).val());
         for (var i = 1; i <= numberPeople; i++) {
             $('#register').append('<div class="reg-person"><span class="person">Person '+i+' </span><div class="field"><label for="name">name</label><input type="text" id="name" name="name" /></div><div class="field"><label for="company">company</label><input type="text" id="company" name="company" /></div><div class="field"><label for="email">email address</label><input type="text" id="email" name="email" /></div><div class="field"><label for="contact">contact number</label><input type="text" id="contact" name="contact" /></div></div>');

         }
     } else {
         var peopleDiff = ($(this).val() - peopleDisplayed);
         if (peopleDiff > 0) {
             for (var i = 1; i <= peopleDiff; i++) {
                $('#register').append('<div class="reg-person"><span class="person">Person '+i+' </span><div class="field"><label for="name">name</label><input type="text" id="name" name="name" /></div><div class="field"><label for="company">company</label><input type="text" id="company" name="company" /></div><div class="field"><label for="email">email address</label><input type="text" id="email" name="email" /></div><div class="field"><label for="contact">contact number</label><input type="text" id="contact" name="contact" /></div></div>');

             }
         } else if (peopleDiff < 0) {
             var diff = -peopleDiff;
             for (var i = 1; i <= diff; i++) {
                 $('#register').children('div.reg-person').last().remove();
             }
         }
         peopleDisplayed = ($(this).val());
     }

 });