JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
 <head>
  <title>Zeus Palace Hotel</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
  <link rel="stylesheet" href="//dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.css" /> 
  <link rel="stylesheet" href="css/gi-mobile.css" />
  
  <script type="text/javascript" src="//code.jquery.com/jquery-1.6.4.min.js"></script>
  <script type="text/javascript" src="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
 </head>
 <body>
  <section data-role="page" id="home" data-theme="b">
   <header data-role="header" class="header">
    <figure class="hotelBanner"></figure>
   </header>
   <section data-role="content" class="ui-grid-a main cf">
    <form id="step1" action ="#">
     <label for="checkinDate">Check-in:</label>
     <input name="checkinDate" id="checkinDate" type="date" data-role="datebox"
   data-options='{"mode": "calbox", "afterToday": true}' />
     <label for="checkoutDate">Check-out:</label>
     <input name="checkoutDate" id="checkoutDate" type="date" data-role="datebox"
   data-options='{"mode": "calbox", "afterToday": true}' />
    <input type="submit" id="btnsubmit" value="Next >>" />
    </form>
    <p>Number of Nights: <span id="numNights"></span></p>
   </section>
   <footer data-role="footer" class="footer">
   </footer>
  </section>
  
  <script type="text/javascript" src="//dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.js"></script>
  <script>window.jQuery.fn.validate || document.write('<script src="js/libs/jquery.mobile.datebox.min.js"><\/script>')</script>
   <script type="text/javascript" src="//dev.jtsage.com/cdn/datebox/i8n/jquery.mobile.datebox.i8n.en.js"></script>
  <script>window.jQuery.fn.validate || document.write('<script src="js/libs/jquery.mobile.datebox.i8n.en.js"><\/script>')</script>

  <script defer src="js/master.js"></script>
  
 </body>
</html>

JavaScript

// Main JS //

jQuery.extend(jQuery.mobile.datebox.prototype.options, {
    'dateFormat': 'mm/dd/YYYY',
    'headerFormat': 'mm/dd/YYYY',
});

$(document).ready(function() {
    $('a.ui-btn .ui-icon').removeClass('ui-icon-grid');
    $('a.ui-btn .ui-icon').addClass('ui-icon-arrow-d');
function parseDate(elem) {

    return elem.data('datebox').theDate;
}

function daydiff(checkinDate, checkoutDate) {

    return (checkoutDate-checkinDate)/(1000*60*60*24)
}
$('#checkoutDate, #checkinDate').live('change', function() {
    $('#numNights').each(function() {
        $(this).text(daydiff(parseDate($('#checkinDate')), parseDate($('#checkoutDate'))));
    });
});

});