display records with ajax/jquery/json and delete

I am displaying records from the database like this:

$(document).ready(function(){
			$.ajax({
				url: 'functions/list-articles-delete.php',
				dataType: 'json',
				method: 'POST',
				success: function(data) {
				 $.each(data, function(item){
					var tr_str = "<tr>"
					+ "<td>" + data[item].n_title + "</td>"
					+ "<td>" + data[item].n_dateTime + "</td>"
					+ "<td><button class='btn btn-danger' id='deletebut' data-id='" + data[item].id + "'>Delete</button></td>";
					 $( "#output" ).append(tr_str);
						
					 $( "#deletebut" ).on('click', function(){
						// display id of associated record
				}); 
			});			
		},
	});
});

Select allOpen in new window

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?