title: Disable dynamically generated buttons in jquery
body: <p>Each time a user selects a checkbox within a row of a table, and clicks save, it will generate a container which will hold the data in a specific format for that selected row.</p>
  
  <p>Note: The data is coming in the table from JSON.</p>
  
  <p>Similarly, the user will also have an option to add the data manually to the same container through a form.</p>
  
  <p>Now, I all these containers or data holders will be appended to a parent container in the dom.</p>
  
  <p>I need to swap each of these data containers, which I've achieved so far.
  However, the buttons are not getting disabled or hidden for the first container and the last one.</p>
  
  <p>Here's my script</p>
  
  <pre><code>&lt;script&gt;
      function getData(){
          $('input[name="articles"]:checked').map(function() {    
              var content =  JSON.parse(decodeURIComponent(this.value));
              content+= '&lt;div class="container parent&gt;&lt;div class="row article-row"&gt;&lt;div class="col-md-6 article data-col"&gt;&lt;div class="row"&gt;&lt;form class="form-horizontal"&gt;&lt;div class="form-group"&gt;&lt;label class="control-label col-md-4"&gt;Name:&lt;/label&gt;&lt;div class="col-md-8 article-data"&gt;'+name+'&lt;/div&gt;&lt;/div&gt;&lt;/form&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="col-md-6 article btn-col"&gt;&lt;div class="row del-btn"&gt;&lt;button class="btn btn-danger remove"&gt;Delete &amp;nbsp;&lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class="row updown-btn"&gt;&lt;div class="btn-group"&gt;&lt;button class="btn btn-primary btn-sm top-btn"&gt;&lt;span class="glyphicon glyphicon-arrow-up"&gt;&lt;/span&gt;&lt;/button&gt;&lt;button class="btn btn-primary btn-sm down-btn"&gt;&lt;span class="glyphicon glyphicon-arrow-down"&gt;&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;';                                     
              $('.box').html(content);
          });
          $('.remove').click(function(){
              $(this).parents('.parent').remove();
          });             
          resetEvents();
      }
  function addName(){
      var name= $("#articleTitle").val();
      content +='&lt;div class="container parent&gt;&lt;div class="row article-row"&gt;&lt;div class="col-md-6 article data-col"&gt;&lt;div class="row"&gt;&lt;form class="form-horizontal"&gt;&lt;div class="form-group"&gt;&lt;label class="control-label col-md-4"&gt;Name:&lt;/label&gt;&lt;div class="col-md-8 article-data"&gt;'+Count+'&lt;/div&gt;&lt;/div&gt;&lt;/form&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="col-md-6 article btn-col"&gt;&lt;div class="row del-btn"&gt;&lt;button class="btn btn-danger remove"&gt;Delete &amp;nbsp;&lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class="row updown-btn"&gt;&lt;div class="btn-group"&gt;&lt;button class="btn btn-primary btn-sm top-btn"&gt;&lt;span class="glyphicon glyphicon-arrow-up"&gt;&lt;/span&gt;&lt;/button&gt;&lt;button class="btn btn-primary btn-sm down-btn"&gt;&lt;span class="glyphicon glyphicon-arrow-down"&gt;&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;';
          $('.box').html(content);
          $('.removeArticle').click(function(){
          $(this).parents('.parent').remove();
      });
  
  }
  function handleEvents() {
      $(".top-btn, .down-btn").prop("disabled", false).show();    
      $(".parent:first").find(".top-btn").prop("disabled", true).hide();    
      $(".parent:last").find(".down-btn").prop("disabled", true).hide();
  }
  function resetEvents() {    
      $(".top-btn, .down-btn").unbind('click');    
      handleEvents();                 
      $('.down-btn').click(function() {
          var toMove1 = $(this).parents('.article-box');   
          $(toMove1).insertAfter($(toMove1).next());   
          handleEvents();
      });   
      $('.top-btn').click(function() {
          var toMove1 = $(this).parents('.article-box');
          $(toMove1).insertBefore($(toMove1).prev());
          handleEvents();
      });
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>The first data holder will not have a top one to swap with. Hence, the top button should be disabled or hidden.</p>
  
  <p>Similarly, the last data holder will not have a down one to swap with. Hence, the down button should be disabled or hidden.</p>
  
  <p>I'm not able to understand what's wrong with what I wrote?</p>
  
  <p>Note: This works perfectly fine if I use hard-coded data holders rather than generating it on runtime.</p>