JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<form id="bookingsForm">
  <select id="numberOfBookings" name="numberOfBookings">
    <option>Select number of bookings…</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
</form>

CSS

.wrapper {
  margin: 10px 0;
}

.wrapper .inner input {
  width: 200px;
  margin: 3px 0;
}

JavaScript

$('#numberOfBookings').on('change', function() {
  // Remove any existing forms
  $('.wrapper, #submitButton').remove();

  $numBookings = $(this).val();
  $form = $('#bookingsForm');

  // Iterate through number of bookings and append the form
  for (var i = 0; i < $numBookings; i++) {
    $form.append(createForm(i));
  }

  // Add the submit button
  $form.append($('<input/>', {
  	id: 'submitButton',
    type: 'submit',
    value: 'Submit',
    name: 'submit'
  }));
});



// Creates the form
var createForm = function(num) {
  return $('<div/>', {
      'class': 'wrapper'
    }).append(
      $('<div/>', {
        'class': 'inner'
      }).append(
        $('<span/>', {
          text: 'Form ' + (num + 1),
        })
      )
    )
    .append(
      $('<div/>', {
        'class': 'inner'
      }).append(
        $('<input/>', {
          type: 'text',
          placeholder: '(Title) Name and Surname',
          name: 'name' + num
        })
      )
    )
    .append(
      $('<div/>', {
        'class': 'inner'
      }).append(
        $('<input/>', {
          type: 'text',
          placeholder: 'Contact Number',
          name: 'contact' + num
        })
      )
    )
    .append(
      $('<div/>', {
        'class': 'inner'
      }).append(
        $('<input/>', {
          type: 'text',
          placeholder: 'Email',
          name: 'email' + num
        })
      )
    );
}