title: display records with ajax/jquery/json and delete
body: <p>I am displaying records from the database like this:</p>
  
  <pre><code>$(document).ready(function(){
              $.ajax({
                  url: 'functions/list-articles-delete.php',
                  dataType: 'json',
                  method: 'POST',
                  success: function(data) {
                   $.each(data, function(item){
                      var tr_str = "&lt;tr&gt;"
                      + "&lt;td&gt;" + data[item].n_title + "&lt;/td&gt;"
                      + "&lt;td&gt;" + data[item].n_dateTime + "&lt;/td&gt;"
                      + "&lt;td&gt;&lt;button class='btn btn-danger' id='deletebut' data-id='" + data[item].id + "'&gt;Delete&lt;/button&gt;&lt;/td&gt;";
                       $( "#output" ).append(tr_str);
  
                       $( "#deletebut" ).on('click', function(){
                          // display id of associated record
                  }); 
              });         
          },
      });
  });
  </code></pre>
  
  <p>When I click on any of the buttons I want it to console.log() the id of the associated record but not quite sure how to do this?</p>