JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<!-- booking popup -->
<div id="booking_popup" class="popup">
  <div class="dialog">
  
    <form id="booking_form" class="content" action="" method="get">
    
      <h1></h1>
      
      <div class="form-group">
        <label for="booking_name" class="form-label">
          Name<span>*</span>
        </label>
        <input type="text" placeholder="Your Name" class="form-input" id="booking_name" name="name" required />
      </div>
      
      <div class="form-group">
        <label for="booking_email" class="form-label">
          Email<span>*</span>
        </label>
        <input type="email" placeholder="Your Email" class="form-input" id="booking_email" name="email" required />
      </div>
      
      <div class="form-row">
      
        <div class="form-group">
          <label for="booking_hire_start" class="form-label">
            Hire start date<span>*</span>
          </label>
          <input type="date" class="form-input" id="booking_hire_start" name="hire_start" required />
          
        </div>
        
        <div class="form-group">
        
          <label for="booking_hire_end" class="form-label">
            Hire end date<span>*</span>
          </label>
          <input type="date" class="form-input" id="booking_hire_end" name="hire_end" required />
          
        </div>
        
      </div>
     
      <input type="hidden" name="vehicle_id" value="" />
      
      <button type="submit" class="btn btn-red">Book Vehicle Now</button>
      
    </form>
    
  </div>
</div>

<div id="vehicles">

  <div class="vehicle" data-type="car" data-vehicle-id="62">

    <div class="vehicle-model">
      <strong>VOLKSWAGEN</strong><br />
      MK7 GOLF GTI
    </div>

    <button class="btn btn-block btn-blue" name="book_vehicle">
      Book Vehicle
    </button>

  </div>
  <div class="vehicle" data-type="car" data-vehicle-id="24">

    <div class="vehicle-model">
      <strong>AUDI</strong><br />
      R8 V10 PLUS
    </div>

   ...

CSS

BODY {
  font-family: 'Helvetica', sans-serif;
  font-size: 1rem;
  padding: 20px;
  margin: 0;
}

*,
::after,
::before {
  box-sizing: border-box;
}

STRONG {
  font-weight: bold;
}

.form-label {
  display: block;
  margin-bottom: .5rem;
}

.form-label SPAN {
  color: red;
  margin-left: .125rem;
}

.form-input {
  display: block;
  width: 100%;
  height: calc(1.5rem + .75rem + 2px);
  padding: .25rem .5rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: black;
  border: 1px solid grey;
  border-radius: .25rem;
  margin-bottom: 1rem;
}

.form-input::placeholder {
  color: silver;
}

.form-input[type="date"]::-webkit-datetime-edit {
  font-family: 'Helvetica', sans-serif;
  color: silver;
}

.form-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: -5px;
}

.form-row>.form-group {
  display: block;
  position: relative;
  padding-right: 5px;
  padding-left: 5px;
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
  width: 100%;
}

.btn {
  display: inline-block;
  font-weight: 400;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  border: 1px solid transparent;
  padding: .5rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: .25rem;
  cursor: pointer;
}

.btn-block {
  display: block;
  width: 100%;
}

.btn-blue {
  background-color: blue;
}

.btn-red {
  background-color: red;
}

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  background: rgba(0, 0, 0, .75);
  z-index: 100;
  overflow-x: hidden;
  overflow-y: hidden;
}

.popup.open {
  overflow-y: scroll;
  width: 100%;
  height: 100%;
}

.popup > .dialog {
  z-index: 101;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: auto;
  cursor: pointer;
}


.popup > .dialog > .content {
  position: relative;
  display: block;
  width: auto;
  max-width: 450px;
  margin: 20px 15px;
  padding: 20px;
  background: white;
 ...

JavaScript

// constant booking element vars
const booking_popup = $('#booking_popup');
const booking_form = $('#booking_form');

// button with name attribute book_vehicle on click function
// target all buttons with this selector within document
// so any newly added vehicles to document this will still fire
$(document).on('click', '[name="book_vehicle"]', function(e) {
  
  // get vehicle id from button data attribute
  let vehicle_id = $(this).parent('.vehicle').data('vehicle-id');

  // get the current vehicle modal title description html
  let vehicle_model = $('.vehicle-model', '[data-vehicle-id="' + vehicle_id + '"]').html();

  // if booking popup has class open 
  if (!$(booking_popup).hasClass('open')) {

    // add vehicle model to booking form heading 1
    $('H1', booking_popup).html(vehicle_model);

    // set the hidden input name vehicle id
    $('[name="vehicle_id"]', booking_form).val(vehicle_id);

    // open the booking popup by adding open class
    $(booking_popup).addClass('open');

  }

});

// re-usabel popup close function
$(document).on('click', '.popup.open', function(e) {
   
  // if click event is not in the popop dialog
  if (!$(e.target).is('.dialog *')) {

    // remove current popup open class
    $(this).removeClass('open');
    
    // custom actions for booking popup
    if (this.id === 'booking_popup') {
      
      // remove the vehicle id from popup form
      $('[name="vehicle_id"]', booking_form).val(null);
      
    }
    
  }

});

// booking form on submit function
$(document).on('submit', booking_form, function(e) {

  // prevent form default submit action
  e.preventDefault();

  // set empty submission object
  let submission = {};

  // for each of this form submit event target object entries as key/field
  for (const [key, field] of Object.entries(e.target)) {

    // if object entry (field) has a name attribute
    if (field.name) {

      // add name/value to submission object
      submission[field.name] =...