jQuery 2 sets of datepicker conflict

Question

I have two sets of jQuery datepickers. One that loads on the page for desktop, the other in a modal for mobile. The first instance with two dates (Arrival Date & Departing Date) works as intended. But the second group of two dates in the mobile modal isn't passing either the arrival nor departure date onclick button submission.

Also the jQuery datepicker when selecting the arrival date it will not adjust the departure date +1 day automatically like I have managed on the Desktop set. There seems to be a conflict between the two datepicker sets. I have .split the Month and Day so they maybe styled stacked instead of inline. The form is submitted to a third party booking engine. I don't understand what I have done wrong. I don't have duplicate ID's in my functions. Any help would be appreciated.

enter image description here

Mobile datepicker depart date not updating after arrival date changed to after original departure date: enter image description here

This specific page is running it in the top righthand corner on desktop button event on mobile: view online version here

HTML:

 <form id="c5QuickBookDesktop" class="book-form-align" action="https://secure.clontarfcastle.ie/convert/site/Clontarf%20Castle%20Hotel/index.php" method="post">
        <div class="date">
          <label class="">Arrive</label>
          <input class="input-c060e3a from-month calendarWith2Dates cf-booking-month" for="from" title="Arrive" readonly="" type="text">
          <input class="cal calendarWith2Dates book-input-date from book-input input-lg" readonly="" type="text" value="Arrive">
          <input class="checkin" value="" name="checkin" type="hidden">
        </div>
        <div class="dateOut">
          <label class="" for="to">Depart</label>
          <input class="cf-booking-month to-month" for="to" title="Arrive" readonly="">
          <input class="calendarWith2Dates book-input-date to" readonly="" type="text" value="Depart">
        </div>
        <div class="nights hideInput">
          <input class="nights" name="nights" type="hidden" value="4">
        </div>
        <div class="">
          <button class="btn-light-effect" onclick="submitC5QuickBookDesktop()" type="button" value="Check Availability" target="_blank">Book Now</button>
          <input name="fw_submitted" type="hidden" value="1">
          <input class="av" value="search" name="av" type="hidden">
        </div>
      </form>

jQuery:

 /*<![CDATA[*/
 $(document).ready(function () {
  $(function () {
      $(".from").datepicker('setDate', new Date());
      $(".to").datepicker('setDate', '+1d');
      $('.checkin').datepicker('setDate', new Date());
  });
  $(".from-col").click(function () {
      $(".from").datepicker("show");
  });
  $(".to-col").click(function () {
      $(".to").datepicker("show");
  });
  $(".from").datepicker({
      dateFormat: "dd mm yy",
      minDate: 0,
      dateonly: true,
      altField: ".from-month",
      altFormat: "MM",
      onSelect: function (a) {
          var b = $(".from").datepicker("getDate");
          b.setDate(b.getDate() + 1);
          $(".to").datepicker("setDate", b);
          $(".to").datepicker("option", "minDate", b)
      },
      onClose:function(dateText, inst) {
          //dateText comes in as MM/DD/YY
          var dateArr = dateText.split(' ');
          var day = dateArr[0];
          var month = dateArr[1];
          var year = dateArr[2];
          //define select option values for
          //corresponding element
          $('select#arrmonth').val(month);
          $('select#arrday').val(day);
          $('select#arryear').val(year);
          $('.checkin').val(year + "-" + month + "-" + day);
          dateDifference();
      }
  });

  $(".to").datepicker({
      dateFormat: "dd mm yy",
      minDate: ".from" +1,
      altField: ".to-month",
      altFormat: "MM",
      onSelect: function () {
          var b = $(".from").datepicker("getDate");
          console.log(b);
          var a = $(".to").datepicker("getDate");
          if (a <= b) {
              var c = $(".to").datepicker("option", "minDate");
              $(".to").datepicker("setDate", c)
          }
      },
      onClose: function(dateText, inst) {                    
          var dateDep = dateText.split(' ');
          var day = dateDep[0];
          var month = dateDep[1];
          var year = dateDep[2];
          //define select option values for
          //corresponding element
          $('select#depmonth').val(month);
          $('select#depday').val(day);
          $('select#depyear').val(year);
          dateDifference();
      }
  });
  $(".checkin").datepicker({
      dateFormat: "yy-mm-dd"
      });
  function dateDifference() {
      if($(".from").val()!='' && $(".from").val()!='') {
          var diff = ($(".to").datepicker("getDate") - $(".from").datepicker("getDate")) / 1000 / 60 / 60 / 24;
          var roundedDiff = Math.round(diff);
          $('.nights').val(roundedDiff);
      }
  }
});


function submitC5QuickBookDesktop()
    {   
        //document.forms['c5TopQuickBook'].elements['checkin'].value = document.forms['c5TopQuickBook'].elements['.checkin-top'].val;
        document.forms['c5QuickBookDesktop'].submit();
    }

function submitC5QuickBookMobile()
    {   
        //document.forms['c5TopQuickBook'].elements['checkin'].value = document.forms['c5TopQuickBook'].elements['.checkin-top'].val;
        document.forms['c5QuickBookMobile'].submit();
    }