title: adding jquery time picker to the dynamically added rows in a table
body: <p>Hi i created a table in my page in which i used the timepicker functionality for the input elements, and using the below function i'm adding a new row in my table whenever i reach the last row in the table:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function(){
      $("#myTable tr:last input").live("click",function(){
      $(this).parent().parent().clone().appendTo("#myTable");
      }); 
      }); 
     &lt;/script&gt;
  </code></pre>
  
  <p>This works fine, and i added the jquery timepicker in my table as :</p>
  
  <pre><code>&lt;link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/darkness/jquery-ui.css" rel="stylesheet" type="text/css"/&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;link href="../css/jquery.ui.timepicker.css" rel="stylesheet" /&gt;
  &lt;script src="../js/jquery.ui.timepicker.js"&gt;&lt;/script&gt;
    &lt;script&gt;
    jQuery(function($){
      $('#element1').timepicker();
      $('#element2').timepicker();
      $('#element3').timepicker();
      $('#element4').timepicker();
  });
  </code></pre>
  
  <p>and my table in the page is as :</p>
  
  <pre><code>&lt;table id="myTable" class="timingtable" border="1" cellpadding="0" cellspacing="0" align="left" style="width:100%; height:170px;"&gt;
    &lt;tr&gt;
      &lt;th&gt;Start time&lt;/th&gt;
      &lt;th&gt;End time&lt;/th&gt;
      &lt;th&gt;Family&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="text" name="start" id="element1" value=""&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" name="end" id="element2" value="" &gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text"/&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
     &lt;td&gt;&lt;input type="text" name="start" id="element3" value=""&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" name="end" id="element4" value="" &gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text"/&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Here I need to add the Jquery Timepicker functionality to the newly added rows in my table dynamically how can i do that ??
  any help is much appreciated....thanks in advance....</p>