JQuery Timepicker/Datepicker

[kpcollier]

I've been using the JQuery Timepicker to append Time values to my date fields. In the workflow, the users will select a date and then use two timepicker fields to select a block of time, in example 6:00AM and 9:00AM. I then append the time to the date field.

Previously, this was used in a separate submission form, where the user would click a link which would open a new tab. I am now trying to put this submission form in a Modal with a button on the actual calendar page - this way, the user can click on the modal button and have the submission form with the timepicker pop up.

When on the search form of the calendar, the timepicker in the modal works. However, as soon as I go to the calendar results page, the timepicker stops working. 

The Jquery and Timepicker scripts use to be on the datapage itself, but they are now on the webpage. The links to the submission form (that opens in a tab) still works, and the modal submission form works when on the Search Form, but again it stops working when on the Results Page of the calendar. I've tried swapping positions of the stylesheet and scripts but to no avail.

I am getting an Uncaught Typerror, timepicker is not found. One time I got an error with something about children, but I cannot seem to replicate this again. 

Any ideas?

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<style>
  #rCal{
    background-color: antiquewhite !important;
  }
  #pmResi{
    display: block;
  }

.open-button{background-color:green!important; color:#fff!important; padding:10px; border:none; border-radius:50px; cursor:pointer; opacity:.8; position:fixed; height:85px; width:85px; bottom:2%; right:1%; z-index:100; font-size:42px;}

.cancel{background-color:#0f0b34; color:red; padding:4px 10px; border:1px solid red; border-radius:5px; font-weight: 700;cursor:pointer; width:98%; opacity:.8; margin:20px 0px 10px 0px}

.cancel:hover{background-color:red; color:white; border:1px solid white;}

.w3-modal{
  z-index:-1 !important;
  left: auto !important;
  top: auto !important;
  background-color: #f2f2f2 !important;
}

.w3-modal-content {
  width: 395px !important;
  background-color:#0f0b34 !important;
  border-radius:5px;
  border:5px solid #fff;
  box-shadow:0 1px 5px 5px rgba(0,0,0,.1);
  text-align:center;
  z-index: 101;
}

.form-container{
  background-color:#0f0b34;
}

#id01{
  display: none;
}

.pWS{font-family:'Montserrat',sans-serif; color:#fff; font-size:20px; font-weight:900;}
</style>

<div class="main-content">
  <script type="text/javascript" src="https://c3eku680.caspio.com/dp/e75050001a6760b7f00e44ddb9dc/emb"></script>
</div>

<script type="text/javascript" src="https://c3eku680.caspio.com/dp/e75050001b1a97e16f6b4274897f/emb"></script>

<div class="w3-container">
  <button onclick="document.getElementById('id01').style.display='block'" class="w3-button open-button">+</button>
  <div id="id01" class="w3-modal">
    <div class="w3-modal-content" style="bottom:0px;right:0px;position:fixed;height:79vh;overflow-y:scroll;">
      <div class="w3-container form-container">
        <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">&times;</span>
        <div class="pWS">ADD NEW APPOINTMENT:</div>
          EMBED DATAPAGE HERE
        </div>
      <button type="button" onclick="document.getElementById('id01').style.display='none'"class="btn cancel" onclick="closeForm()">CLOSE</button>
    </div>
  </div>
</div>


<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>