title: jQuery timepicker not loading for dynamic text fields
body: <p>I have a form, which first loads text fields and has a Time Picker associated with it.
  The user can also click a 'More' button, which dynamically loads extra text fields underneath. This also has a time picker associated with it, however it will not load on the dynamic fields.
  I am using a jQuery timepicker addon by Trent Richardson <a href="http://trentrichardson.com/examples/timepicker" rel="nofollow noreferrer">http://trentrichardson.com/examples/timepicker</a></p>
  
  <p>I also found a previous answer (<a href="https://stackoverflow.com/questions/18666634/jquery-timepicker-doesnt-work-on-dynamic-input">https://stackoverflow.com/questions/18666634/jquery-timepicker-doesnt-work-on-dynamic-input</a>), however this does not fix my problem.</p>
  
  <p>This is the form; the first div is loaded dynamically:</p>
  
  <pre><code>&lt;div class="row"&gt;
  &lt;a href="#more" rel="[{$day}]" id="addhour_{$outlet}_{$day}" class="btn-more add-hours-link"&gt;Add More+&lt;/a&gt;
  &lt;div class="sample" style="display: none;"&gt;
      &lt;label&gt;&amp;nbsp;&lt;/label&gt;
      &lt;input type="text" class="outlet-hour from timepicker2" name="from[{$day}][]" /&gt;
      &lt;span&gt;to&lt;/span&gt;
      &lt;input type="text" class="outlet-hour to timepicker2" name="to[{$day}][]" /&gt;
  &lt;/div&gt;
  
  
  &lt;div&gt;
      &lt;label for="from_{$outlet}_{$day}"&gt;{$name}&lt;/label&gt;
      &lt;input id="from_{$outlet}_{$day}" class="outlet-hour from timepicker" type="text" name="from[{$day}][]" /&gt;
      &lt;span&gt;to&lt;/span&gt;
      &lt;input id="to_{$outlet}_{$day}" type="text" class="outlet-hour to timepicker" name="to[{$day}][]" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>This is the JS for the main fields (which is working fine):</p>
  
  <pre><code>$('.timepicker').timepicker({
      showSecond: false,
      timeFormat: "H:mm",
      stepMinute: 15
  });
  </code></pre>
  
  <p>This is the JS that adds the extra fields:</p>
  
  <pre><code>$(document).on('click', 'a.add-hours-link', function(event, hour){
      var from = !!hour ? hour.from : '';
      var to = !!hour ? hour.to : '';
  
      $('.timepicker2').removeClass('hasDatepicker');
      $('.timepicker2').each(function(){
      $(this).timepicker({
          showSecond: false,
          timeFormat: "H:mm",
          stepMinute: 15
      });
  });
  
      $(this).parent().find('.sample')
          .clone()
          .removeClass('sample')
          .appendTo($(this).parent())
          .find('.from').val(from).end()
          .find('.to').val(to).end()
          .fadeIn('fast');
  
      return false;
  });
  </code></pre>
  
  <p>Currently I have renamed the class to timePicker2 and am removing the hasDatepicker class, as mentioned in a previous answer.</p>
  
  <p>Any ideas appreciated.
  Thanks</p>