title: Jquery datepicker multiple rows button image
body: <p>I used datepicker in multiple rows. Its working correctly. Now I placed the button image in the datepicker textbox. I need to activate the button image to click and show the calendar. After using the "showOn:'button',", i got the following problem. when i add more rows by clicking the "Add new" button, button images are displayed many times. Please help me how to rectify the problem</p>
  
  <p>Here is the javascript code:</p>
  
  <pre><code>$(document).ready(function(){
          setdatepicker();
  });
  
   $("input[type='button'].AddRow").live('click',
  function() {
      var index = $(this).closest('tr').index();
      if (index &gt; 0) {
          $(this).closest('tr').remove();
      } else {
  
          var $tr = $(this).closest('tr').clone(true);
          var $input = $tr.find('input.startdatum');
          var index = $('input#counter').val();
           $('#acti_btn').val('Delete');
          var id = 'datepicker' + index;
          index++;
          $('input#counter').val(index);
          $input.attr('id', id).data('index', index);
          console.log(index);
          $tr.prependTo($(this).closest('table'));
        setdatepicker();
      }
  
      var renum = 1;
      $("tr td div.incre_count").each(function() {
          $(this).text(renum);
          renum++;
      });
  });
  
  
  
  
  function setdatepicker(){
    $('.startdatum').each(function() {
              $(this).datepicker('destroy');
              $(this).datepicker({
                  dateFormat: 'mm-dd-yy',
              showButtonPanel     :   true,
              showOn              :   'button',
              buttonImageOnly     :   true,
              buttonImage         :   '../themes/basic/images/calendar.png'
  
              });
          });
  
  }
  </code></pre>
  
  <p>Here is the HTML Code :</p>
  
  <pre><code>&lt;form&gt;
  &lt;table width="90%" id="brdcst_info"&gt;
                                      &lt;thead class="cf"&gt;
                                          &lt;tr&gt;
                                              &lt;th&gt;S.No.&lt;/th&gt;
                                              &lt;th&gt;Match Date&lt;/th&gt;
                                              &lt;th&gt;Action&lt;/th&gt;
                                          &lt;/tr&gt;
                                      &lt;/thead&gt;
                                      &lt;tbody style="text-align:center;"&gt;
                                                                              &lt;tr class="odd"&gt;
                                              &lt;td &gt;&lt;div id="likes" class="incre_count"&gt; &lt;span class="figure"&gt;1&lt;/span&gt;&lt;/div&gt;&lt;/td&gt;
  
                                              &lt;td&gt;
  
                                              &lt;div id="calen"&gt;
  
                                              &lt;input class="startdatum calendar_input1" name="TvinvitationForm[datepicker1][]" id="TvinvitationForm_datepicker1" type="text" /&gt;  &lt;/div&gt;                                           &lt;/td&gt;
                                              &lt;td&gt;
                                                  &lt;input type="Button" value="Add New" class="AddRow"  id="acti_btn"&gt;                                         &lt;/td&gt;
                                          &lt;/tr&gt;
                                    &lt;/tbody&gt;
                                  &lt;/table&gt;
                                  &lt;input type="hidden" value="0" id="counter"&gt;
  &lt;/form&gt;
  </code></pre>