JavaScript HTML Injection Error

I know some of the quirks of injecting HTML via JavaScript are subtle, but this one produces results which don't even make sense. I'm guessing some of the double quote characters are being misinterpreted, but the guides I've read don't seem to suggest doing anything different.

This is a function which injects a series of dynamically labelled buttons into a bootstrap panel and then injects that panel into a row on the page. So far I'm only producing 10 buttons, and I know I need to address the problem of having more than 12 and making a new panel. For now, the button creation is the issue.

function tableMaker(data, tableID) {
var panel = '<div class="col-md-12" style="height: 140px"> \n\t<div class="panel panel-default" style="height: 100%"> \n\t\t<div class="panel-heading">Apps Alive</div> \n\t\t <div class="panel-body">';
var mytable       = '';
var colStart      = '<div class="col-md-1"><center><b>';
var titleEnd      = '</b></center>';
var buttonStart   = '<center><button id="';
var buttonMiddle1 = '-appcheck" type="button" class="btn btn-default btn-circle btn-lg" title="';
var buttonMiddle2 = '" onclick="templateLoader("';
var buttonMiddle3 = '")"';
var buttonEnd     = '-appcheck-icon" class="fa fa-exclamation-circle"></i></button></center>';
var colEnd        = '</div>';
var panelEnd      = '\n</div>';


var i = 0, j = 0, colLimit = 12;
for(; i < data.length;){
    for (var j = 0; j < colLimit && i < data.length; ++j, ++i) {
        /*
         * Template
         * <button id="OPS-appcheck" type="button" class="btn btn-default btn-circle" title="OPS" onclick="templateLoader("OPS")"><i id="OPS-appcheck-icon" class="fa fa-exclamation-circle"></i>
         * </button>
         */
        mytable +=  colStart + data[i][2] + titleEnd + '\n' + buttonStart + data[i][2] + buttonMiddle1 +
                    data[i][2] + buttonMiddle2 + data[i][2] + buttonMiddle3 + '><i id="' + data[i][2] +
                    buttonEnd + colEnd;
    }
}

panel += mytable + panelEnd;

document.getElementById(tableID).innerHTML = panel;
}

To me, this looks right. Every quote and tag has a matching closer where it should be, but browsers turn the HTML generated into this odd thing:

The 'type' isn't in remotely the correct spot, and I don't know how it managed to get there based on the string format. There are also a few extra double quotes, but visual inspection doesn't tell me how they got there.

EDIT So, escaping the suggested double quotes has produced the following:

That seems like it should work, but the onclick isn't doing as I'd expect. It's probably a regex issue with my MVC mapping, but maybe it's still the JavaScript.

At the top of the HTML page, jquery.js and then dashboard.js are invoked. At the top of dashboard.js is the following:

function templateLoader(appTag) {
    $.get('/app/' + appTag);
}

And in the controller for the project (the only one so far), I have this:

@RequestMapping(value = "/app/*", method = RequestMethod.GET)
public ModelAndView generic()
{
    return new ModelAndView("template");
}

Yet, if I click any of the buttons, I get no reported request according to the Tomcat logs, and I'm not being redirected to my target page. Is it the mvc, or the script? There are no errors in the dev tools console either.