title: jQuery functions work in one aspx but don't work in another aspx that's practically identical
body: <p>In my MasterPage.master page I have this two jquery functions:</p>
  
  <pre><code>function calcTime() {
      var time1 = $(".timepickerFrom").val().split(':'),
        time2 = $(".timepickerTo").val().split(':');
      var hours1 = parseInt(time1[0], 10),
        mins1 = parseInt(time1[1], 10),
        hours2 = parseInt(time2[0], 10),
        mins2 = parseInt(time2[1], 10),
        time = "";
  
      var diff = 0,
        hours = 0,
        mins = 0;
  
      mins1 = (hours1 * 60) + mins1;
      mins2 = (hours2 * 60) + mins2;
      diff = mins2 - mins1;
      if (diff &lt; 0) {
          diff = 1440 + diff;
          document.getElementById('labelTime').style.display = 'block';
      }
      else {
          document.getElementById('labelTime').style.display = 'none';
      }
  
      hours = Math.floor((diff / 60), 0);
      mins = Math.round((((diff / 60) - hours) * 60), 0);
      time = hours + ":" + Right("00" + mins, 2);
  
      if (time == "NaN:aN") {
          time = "0:00";
      }
  
      $(".timepickerTime").val(time);
  };
  
  function calcTo() {
      var time1 = $(".timepickerFrom").val().split(':'),
        time2 = $(".timepickerTime").val().split(':');
      var hours1 = parseInt(time1[0], 10),
        mins1 = parseInt(time1[1], 10),
        hours2 = parseInt(time2[0], 10),
        mins2 = parseInt(time2[1], 10),
        time = "";
  
      var diff = 0,
        hours = 0,
        mins = 0;
  
      mins1 = (hours1 * 60) + mins1;
      mins2 = (hours2 * 60) + mins2;
      diff = mins1 + mins2;
  
      if (diff &gt;= 1440) {
          diff = diff - 1440;
          document.getElementById('labelTime').style.display = 'block';
      }
      else {
          document.getElementById('labelTime').style.display = 'none';
      }
  
      hours = Math.floor(diff / 60, 0);
      mins = Math.round(((diff / 60) - hours) * 60, 0);
      time = hours + ":" + Right("00" + mins, 2);
  
      if (time == "NaN:aN") {
          time = "0:00";
      }
  
      $(".timepickerTo").val(time);
  };
  </code></pre>
  
  <p>both are working fine. </p>
  
  <p>then I have one page: NewRecord.aspx which have these lines of code:</p>
  
  <pre><code>&lt;div class="form-group"&gt;
      &lt;label class="col-sm-3 control-label no-padding-right" for="form-field-1"&gt;Čas od &lt;/label&gt;
      &lt;div class="col-sm-9"&gt;
          &lt;div class="input-group col-xs-10 col-sm-5"&gt;
              &lt;input id="timepickerFrom" name="timepickerFrom" type="text" class="form-control timepickerFrom" value="&lt;%= this.InputValue_timepickerFrom %&gt;" /&gt;
              &lt;span class="input-group-addon"&gt;
                  &lt;i class="fa fa-clock-o bigger-110"&gt;&lt;/i&gt;
              &lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="form-group"&gt;
      &lt;label class="col-sm-3 control-label no-padding-right" for="form-field-1"&gt;Čas do &lt;/label&gt;
      &lt;div class="col-sm-9"&gt;
          &lt;div class="input-group col-xs-10 col-sm-5"&gt;
              &lt;input id="timepickerTo" name="timepickerTo" type="text" class="form-control timepickerTo" value="&lt;%= this.InputValue_timepickerTo %&gt;" /&gt;
              &lt;span class="input-group-addon"&gt;
                  &lt;i class="fa fa-clock-o bigger-110"&gt;&lt;/i&gt;
              &lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="form-group"&gt;
      &lt;label class="col-sm-3 control-label no-padding-right" for="form-field-1"&gt;Čas skupaj &lt;/label&gt;
      &lt;div class="col-sm-9"&gt;
          &lt;div class="input-group col-xs-10 col-sm-5"&gt;
              &lt;input id="timepickerTime" name="timepickerTime" type="text" class="form-control timepickerTime" value="&lt;%= this.InputValue_timepickerTime %&gt;" /&gt;
              &lt;span class="input-group-addon"&gt;
                  &lt;i class="fa fa-clock-o bigger-110"&gt;&lt;/i&gt;
              &lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;label class="col-sm-3 control-label no-padding-right" for="form-field-1"&gt;&lt;/label&gt;
      &lt;div class="col-sm-9"&gt;
          &lt;label id="labelTime" style="display: none; color: red"&gt;Pozor! Čas do je manjši od časa od.&lt;/label&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and calculations are working fine. When I change from or to it recalculates time and when I change time it recalculates to. </p>
  
  <p>then I have one more file: VacationNewRecord.aspx
  An in it code like this:</p>
  
  <pre><code>    &lt;div class="col-sm-9"&gt;
          &lt;div class="input-group col-xs-10 col-sm-5"&gt;
              &lt;input id="timepickerFrom" name="timepickerFrom" type="text" class="form-control timepickerFrom" value="&lt;%= this.InputValue_timepickerFrom %&gt;" /&gt;
              &lt;span class="input-group-addon"&gt;
                  &lt;i class="fa fa-clock-o bigger-110"&gt;&lt;/i&gt;
              &lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="form-group hidden" id="cas2" runat="server"&gt;
      &lt;label class="col-sm-3 control-label no-padding-right" for="form-field-1"&gt;Čas do &lt;/label&gt;
  
      &lt;div class="col-sm-9"&gt;
          &lt;div class="input-group col-xs-10 col-sm-5"&gt;
              &lt;input id="timepickerTo" name="timepickerTo" type="text" class="form-control timepickerTo" value="&lt;%= this.InputValue_timepickerTo %&gt;" /&gt;
              &lt;span class="input-group-addon"&gt;
                  &lt;i class="fa fa-clock-o bigger-110"&gt;&lt;/i&gt;
              &lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="form-group hidden" id="cas3" runat="server"&gt;
      &lt;label class="col-sm-3 control-label no-padding-right" for="form-field-1"&gt;Čas skupaj &lt;/label&gt;
  
      &lt;div class="col-sm-9"&gt;
          &lt;div class="input-group col-xs-10 col-sm-5"&gt;
              &lt;input id="timepickerTime" name="timepickerTime" type="text" class="form-control timepickerTime" value="&lt;%= this.InputValue_timepickerTime %&gt;" /&gt;
              &lt;span class="input-group-addon"&gt;
                  &lt;i class="fa fa-clock-o bigger-110"&gt;&lt;/i&gt;
              &lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and here how functions are called:</p>
  
  <pre><code>     $('.timepickerFrom').timepicker({
          minuteStep: 15,
          showSeconds: false,
          showMeridian: false,
          disableFocus: true,
          appendWidgetTo: "body",
          icons: {
              up: 'fa fa-chevron-up',
              down: 'fa fa-chevron-down'
          }
      }).on('change', function () {
          calcTime();
      }).next().on(ace.click_event, function () {
          $(this).prev().focus();
      });
  
      $('.timepickerTo').timepicker({
          minuteStep: 15,
          showSeconds: false,
          showMeridian: false,
          disableFocus: true,
          icons: {
              up: 'fa fa-chevron-up',
              down: 'fa fa-chevron-down'
          }
      }).on('change', function () {
          calcTime();
      }).on('focus', function () {
          $('#timepickerTo').timepicker('showWidget');
      }).next().on(ace.click_event, function () {
          $(this).prev().focus();
      });
  
      $('.timepickerTime').timepicker({
          minuteStep: 15,
          showSeconds: false,
          showMeridian: false,
          disableFocus: true,
          icons: {
              up: 'fa fa-chevron-up',
              down: 'fa fa-chevron-down'
          }
      }).on('change', function () {
          calcTo();
      }).on('focus', function () {
          $('#timepickerTime').timepicker('showWidget');
      }).next().on(ace.click_event, function () {
          $(this).prev().focus();
      });
  </code></pre>
  
  <p>Code in both files is practically identical. I use class selector. so why the code in first aspx works fine and in the second works only when I change time?</p>