Show a modal and pass information into it

index.cshtml

column.For(x => x.UserAchievementMappingGroup == null ? string.Empty : string.Format("<input type=\"button\" data-command=\"displayAchievementAditonalInfoModal\"/><span class=\"hide\">{0}</span>", x.AchievementTransaction.AdditionalInformation)
    ).Sortable(false).Named("Additional Information")
    .Encode(false).Attributes(@class => "additional-column").HeaderAttributes(@class => "additional-column");

script.js

$(document).ready(function() {
        $(document).on('click', 'input[data-command=displayAchievementAditonalInfoModal]', function (event) {
            var data = $(event.target).siblings('span').html();
            $('.modal-msg').html(renderContentsAsList(data));
            $('#modal-additional-info').modal({ show: true });
        });
    });
    
    

    function renderContentsAsList(contents) {
        var index, ul;
 
        // Create a list for these contents
        ul = $("<ul>");
 
        // Fill it in
        $.each(contents, function(index, entry) {
            var li;
 
            // Create list item
            li = $("<li>");
 
            // Set the text
            li.text(entry.filename);
 
            // Append a sublist of its contents if it has them
            if (entry.content) {
                li.append(renderContents(entry.content));
            }
 
            // Add this item to our list
            ul.append(li);
        });
 
        // Return it
        return ul;
    }
 
    function display(msg) {
        $("<p>").html(msg).appendTo(document.body);
    }