view-source.js

$('.comments-page .comment .flat-list.buttons').each(function () { // this targets each flat-list belonging to comments on a comment page. 
    $(this).append('<li><a class="view-source" href="javascript:void(0)">view source</a></li>'); // it then adds the view sourc button in the belonging function
});

$('body').on('click', '.view-source', function () { // On clicking of the view source button we do what we want to do. Note that we start with body since that is a constant dom element. If you try to target added dom elements directly it will not work. 
    var $this = $(this), // We posisbly want to reuse $(this), it is cleaner to define jquery objects you want to reuse. 
        $parentThing = $this.closest('.thing'),
        thingId = $parentThing.attr('data-fullname'); // we need an id to throw at the api, luckily it is is present in the html.
    
    if($parentThing.find('#box-' + thingId).length) { // Lets see if we already did do this before.
        $parentThing.find('#box-' + thingId).toggle(); // we did, toggle
    } else { // we did not, grab the info.
        $.getJSON('/api/info.json?id=' + thingId, function () { // lets do an ajax call to grab the info we need.
            console.log("success"); // you can remove this, basically lets you know a json call is done.
        })
            .done(function (data) { // by doing the stuff we need to do in .done we make sure we have the data needed since ajax is async.
            var commentBody = data.data.children[0].data.body; // json is basically an object. 
                var commentSourceBox = '<textarea style="display:block" rows="10" cols="50">'+ commentBody + '</textarea>'; // build the source box.
            $parentThing.find('.flat-list').first().before(commentSourceBox); // and add it to the .thing, note that I use .first() if I didn't do that it would add the source box for all child comments as well. 
        });
    }
});