title: Jquery Ajax : auto-refresh
body: <p>In my Ajax success function i created button and on click i am calling a function.
  The problem:
  The page reloads based on the timer in set interval but when i click the button it will call the function based on the number of times the page reloaded.</p>
  
  <p>For example:
  If page reloads 5 times and then i call a function on clicking that button-it will call that function 5 times. 
  if it reloads 10 times then function call is for 10 times.</p>
  
  <p>Please advice what i am doing wrong?</p>
  
  <p>Here is the code:</p>
  
  <pre><code>        $(document).ready(
                  function() {
                 setInterval(function() {                  
                           $.ajax({
                    type: 'GET',
                     url: 'Refresh',
                success: function(data) {
                   var trHTML = '';
              $.each(data, function(i, item) {
      var buttonVar = ('&lt;button id="bt21" class="btn121"&gt;' + "STOP" + '&lt;/button&gt;');
            trHTML += '&lt;tr&gt;&lt;td&gt;'+buttonVar+'&lt;/td&gt;&lt;/tr&gt;'
              });
            $('#test1').append(trHTML);
  
            $(document).on('click','#bt21', function(event) {
           var rownum1 = $(this).closest('tr').index();
         stopTest(data[rownum1].process_id);
           });
               }
           });
        }, 5000);
    });
  </code></pre>