this is my second post on the website. Of all other sites i tried, this one gave the most accurate and useful information!

I'm in a bit of a trouble with buttons, i have a task to make an inbox and to add a "reply" and "delete" button into every instance of the message.

I was indeed wandering if there is a better way to do that than forcing the HTML code into the script, because every message is dynamically generated. Any help and/or suggestions would be very appreciated!(The objects are called from a JSON file).

$(document).ready(function(){
    $.getJSON('public/js/data.json', function(json){
        $.each(json.data, function(i, data){
            var output = '';
         if(data.from.id != '234' && data.from.name != 'Alan Ford'){

            $("#inbox").append(
            output +=
            '<div class="post">'+
            '<div class="h1">'+data.from.name+' - '+data.subject+'</div>'+ //this gives the name of the person who sent the message and the subject
            '<div class="content">'+data.message_formatted+'</div>'+ //The content of the message
                         //buttons should be squeezed left of the date
                           //this gives the date of the message sent
             '<div class="time">'+data.date_sent_formatted.formatted+'</div>'+ 
            '</div>'
    );
         }});
    });

});
var date_sent=convertToDateTime();

function delete_message(id){
    console.log('Delete message with id: '+id);
}

function reply_message(id, sender){
    console.log('Message id: '+id);
    console.log('Reply to: '+sender);
}

The complete code in the JSFiddle . Just copy/pasted!