title: how to change z-index of datetimepicker on every click?
body: <p>I found that datetimepicker default <code>z-index</code> is <code>1</code>, but for my site I need a <code>z-index</code> of <code>9999</code>. I have changed the value with jquery in the click handler, however it only works on the first click. Successive clicks don't work. Why is this?</p>
  
  <pre><code>&lt;td style="height: 40px;"&gt;
      &lt;input type="text" class="datetimepicker" name="sdate" placeholder="Start Date" style="height: 39px; width: 260px;"&gt;             
  &lt;/td&gt;
  &lt;td style="height: 40px;"&gt;
      &lt;input type="text" class="datetimepicker" name="edate" placeholder="End Date" style="height: 39px; width: 260px;"&gt;             
  &lt;/td&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>$(document).ready(function() {
      $('.datetimepicker').on('click', function(e) {
          e.preventDefault();
          $(this).datetimepicker({
              dateFormat: "yy-mm-dd",
              showTimezone: false,
              maskInput: true,
              timeFormat: "HH:mm:ss"
          }).focus();
          $('#ui-datepicker-div').css("z-index", 9999); //this is once time work
      });
  });
  </code></pre>