JSFiddle - React, Tailwind, and code Playground

HTML

<table class="tabpasdding" width="100%">
            <tr>
              <td><label>Select Preference :</label> </td>
              <td>
                <select id="amount">
               
                  <option value="1" selected>One Single Occupancy</option>
                  <option value="2">Two Single Occupancy</option>
                  <option value="2">One Double Occupancy</option>
                  <option value="4">Two Double Occupancy</option>
                  <option value="3">One Single & One Double Occupancy</option>
                </select>
              </td>
            </tr>
          </table>
          <p>&nbsp;</p>
          <div id="groups">
          </div>

JavaScript

$(document).ready(function(){
      $('#amount').change(function(){
      $('#groups').empty();
      var group = '';
      var number = parseInt($(this).val());
      for(var i=1;i<=number;i++){
       group += '<div id="group">' +
        '<h1 style=" font-size: 14px;color: rgb(0, 0, 0);"><u>GUEST DETAILS : '+i+'</u></h1>'+
       '<table class="tabpasdding" width="100%" style="border:1px solid #ccc;">'+
              '<input type="hidden" name="_token" value="{{{ csrf_token() }}}" />'+
              '<tr>'+
                '<td width="50%" align="left">'+
                    '<table width="100%" align="left">'+
      
        
       '<tr>'+
         '<td ><label>Full Name <span style="color:red">*</span></label></td>'+
         '<td ><input type="text" id="pname'+i+'" name="pname'+i+'" class="form-control" autocomplete="off" onkeydown="testForEnter();"></td>'+
       '</tr>'+
 
        '<tr>'+
        '<td ><label>Passport Number <span style="color:green">#</span> </label></td>'+
         '<td ><input type="text" name="ppassport'+i+'" id="ppassport'+i+'" class="form-control"  autocomplete="off" onkeydown="testForEnter();"></td>'+
       '</tr>'+

      '</table>'+
                '</td>'+
                '<td width="50%" align="right">'+
                    '<table width="100%" align="right">'+
      
      '<tr><td><label class="">Check In Date & Time </label></td><td> <div class="input-group date form_datetime " data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">'+
                       '<input class="form-control" size="16" type="text" value="" id="checkindatetime'+i+'" name="checkindatetime'+i+'">'+
                       '<span class="input-group-addon" style="width:17%"><span class="glyphicon glyphicon-remove"></span></span>'+
             '<span class="input-group-addon"  style="width:17%"><span class="glyphicon glyphicon-th"></span></span>'+
                   '</div> </td></tr>'+
     ...