JSFiddle - React, Tailwind, and code Playground

by Harshitha Naidu

HTML

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

JavaScript

$(document).ready(function(){
  //by default generate html based on the default selected value.
  $('#groups').empty();    
  var number = parseInt($("#amount").val());
  createHTML(number);
  
  $('#amount').change(function(){
    $('#groups').empty();    
    number = parseInt($(this).val());
    createHTML(number);
  });
});

   function createHTML(number){
  var group = '';
  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>'+
       
      '</table>'+
                '</td>'+
                '<td width="50%" align="right">'+
                    '<table width="100%" align="right">'+
      
      '<tr><td><label class="">Check In Date & Time </label></td><td>'+
                        '<input size="16" type="text"     id="checkindatetime'+i+'" class="form-control" name="checkindatetime'+i+'">'+
                   '</td></tr>'+
      '<tr><td><label>Check Out Date & Time </label></td><td>'+
                      '<input class="form-control" size="16" type="text" value="" autocomplete="off" id="checkoutdatetime'+i+'" name="checkoutdatetime'+i+'">'+
                      
                   '</td></tr>'+
  
 
         
      
      '</table>'+
                '</td>'+
              '</tr>'+
      
      '</table>' +
      '    <p>&nbsp;</p>'+
//       '<p...